IS 360 Understanding CSS Selectors

Slide 2 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 for example A class An id The above can be mixed and matched together as we will see later

Slide 3 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

Slide 4 Element Selector (Example) The following selects the element and sets the width to 1024 pixels

Slide 5 Element Lists element, element Formats all elements in the list Example to format all and elements code, em {color: #800000;}

Slide 6 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 only inside of code em {color: #800000;}

Slide 7 Element Parent element > element Selects direct descendants of an element Selects all elements where the parent element is code > em {color: #800000;}

Slide 8

Slide 9 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 }

Slide 10 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 tags (more later) p.MyClass {color:aqua}

Slide 11 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: Formatted using class MyClass.

Slide 12 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 and

Slide 13 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 { }

Slide 14 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

Slide 15 Attribute Selectors (Introduction) In addition to element, it’s possible to select elements having a specific attribute defined a specific attribute value

Slide 16 The [attribute] selector Select elements with an attribute named [target] a[target] { font-size: 14pt; }

Slide 17 The [attribute=value] Selector Select elements with an attribute named [target] having a value of _blank a[target=“_blank”] { font-size: 14pt; }

Slide 18 The Universal Selector It selects all elements and children The * character is the universal selector Select all elements inside a element and set the background color

Slide 19 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

Slide 20 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

Slide 21 Importance (2) The !important declaration overrides the default cascade so styles are applied in the following order 1. User agent declarations (browser) 2. User declarations 3. Author declarations 4. Author !important declarations 5. User !important declarations

Slide 22 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

Slide 23 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

Slide 24 Specificity (3) p.note 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

Slide 25 Specificity (Guidelines) Use generic selectors first and add specificity as necessary Rely on specificity rather than ordering selectors Try and keep thing simple

Slide 26 Inheritance Inheritance is how property values propagate from parent elements to child elements For example, setting the font for a 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)

Slide 27 Inheritance Don’t break it breaking-inheritance breaking-inheritance A canonical list of properties and those that inherit

Slide 28 Tools Firebug is an add-in for chrome that helps debug styles

Slide 29

Slide 30 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:

Slide 31 Pseudo-elements (List) ::after – Insert content after element p::after { content: " Append Text"; } ::before – Insert content before element p::before { content: " Preappend Text"; }

Slide 32 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; }

Slide 33 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

Slide 34 Pseudo-classes (Anchor)

Slide 35 Pseudo-classes (List) The following W3Schools links lists all of the pseudo classes lasses.asp lasses.asp