IS 360 Understanding CSS Selectors
Types of Selectors There are different types of selectors Each has a different level of “specificity” An element means to select all elements of a particular type <p> for example A class An id The above can be mixed and matched together as we will see later
Element Selectors (Introduction) As their name implies, element selectors select elements having a particular type body p, table, etc… When using an element selector, use the element name without the <> characters
Element Selector (Example) The following selects the <body> element and sets the width to 1024 pixels
Element Lists element, element Formats all elements in the list Example to format all <em> and <code> elements code, em {color: #800000;}
Element in Element element element It’s possible to apply styles to an element only when it appears inside of another element Note the child element may also be a grandchild, etc ( See > for direct descendant) Example to format <em> only inside of <code> code em {color: #800000;}
Element Parent element > element Selects direct descendants of an element Selects all <em> elements where the parent element is <code> code > em {color: #800000;}
Element in Class Classes allow you to restrict the selector by setting the class attribute of some other element CSS class names begins with a period Followed by the developer-chosen class name Followed by the typical { property:value; property:value }
Declaring a Class (Example) Declare a class named MyClass (name begins with a dot (.)) .MyClass {color:aqua} Declare a class that will be applied only to <p> tags (more later) p.MyClass {color:aqua}
Using a Class (Example) Use the class attribute of an element to apply the style The value is the same as the CSS class name Example to format the paragraph using the CSS class named MyClass: <p class="MyClass">Formatted using class MyClass.</p>
ID Selectors They are similar to inline styles but allow a style to be referenced through an element’s id attribute One-to-one correspondence between the selector and style Use these to format blocks with <div> and <span>
ID Selectors (2) The declaration is similar to a class Use (#) instead of (.) in the CSS file Example to format the element whose id attribute has a value of #TestID #TestID { }
Combining Selectors (Introduction) Selectors (element, class, id) can be combined together to form complex selectors A class can be combined with an element for example Complex selectors, as their name implies, can get complicated
Attribute Selectors (Introduction) In addition to element, it’s possible to select elements having a specific attribute defined a specific attribute value
The [attribute] selector Select <a> elements with an attribute named [target] a[target] { font-size: 14pt; }
The [attribute=value] Selector Select <a> elements with an attribute named [target] having a value of _blank a[target=“_blank”] { font-size: 14pt; }
The Universal Selector It selects all elements and children The * character is the universal selector Select all elements inside a <div> element and set the background color
What we Mean by Cascade The concept of cascade is tied to three concepts (rules) Importance Specificity Source order After these rules are applied, a weight is applied to each rule to determine which one takes precedence http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/ Remember that an HTML 5 document is hierarchical When positioning, we often position an element relative to its parent element
Importance (1) Importance relates to the source of a style sheet User agent – browsers tend to have a default style User – You might have configured browser options to have a style Author – These are the inline / embedded / external styles that we have been talking about These sources are processed in order
Importance (2) The !important declaration overrides the default cascade so styles are applied in the following order User agent declarations (browser) User declarations Author declarations Author !important declarations User !important declarations
Specificity (1) Arguably, this is the most difficult CSS concept to grasp Every CSS rule has a weight That is, one rule might be more or less important than another, or equally important This weight can be precisely calculated There are different ways (techniques) to do this http://specificity.keegan.st/
Specificity (2) Add 1 for each element and pseudo-element Add 10 for each attribute, class, and pseudo-class Add 100 for each ID Add 1000 for an inline style
Specificity (3) p.note #MyID p[lang=“en”] 1 class (10) + 1 element (1) = 11 #MyID p[lang=“en”] 1 ID (100) + 1 attribute (10) + 1 element (1) = 111 If two rules have the same specificity, then the last rule processed wins
Specificity (Guidelines) Use generic selectors first and add specificity as necessary Rely on specificity rather than ordering selectors Try and keep thing simple
Inheritance Inheritance is how property values propagate from parent elements to child elements For example, setting the font for a <body> tag will cause the same font to be applied Not all properties are inherited Inheritance can be forced using the inherit keyword Note the CSS3 inheritance specifications are in “working draft” mode (not final)
Inheritance Don’t break it http://www.fiveminuteargument.com/blog/stop-breaking-inheritance A canonical list of properties and those that inherit http://www.w3.org/TR/CSS21/propidx.html
Tools Firebug is an add-in for chrome that helps debug styles
Pseudo-elements (Introduction) A pseudo-element is used to apply a style to part of an element For example, the first or last line of a paragraph The following syntax is used to apply a pseudo-element:
Pseudo-elements (List) ::after – Insert content after element p::after { content: " Append Text"; } ::before – Insert content before element p::before { content: " Preappend Text"; }
Pseudo-elements (List) ::first-letter – Selects first letter p::first-letter { font-size: 14pt; } ::first-line – Selects first line p::first-line { font-size: 14pt; }
Pseudo-classes (Introduction) Pseudo-classes define the special state of an element Mouse hover They are commonly used with anchor tags: Visited / non-visited links
Pseudo-classes (Anchor)
Pseudo-classes (List) The following W3Schools links lists all of the pseudo classes http://www.w3schools.com/css/css_pseudo_classes.asp