• @font-face Web fonts
• calc() in CSS
• Generated content
• Gradients
• display values
• Mulitiple backgrounds
• background image properties
• Border images
• Border-radius (rounded corners)
• Box-shadow
• Box-sizing
• New Colors
• Alphatransparency
• Media Queries
• Multiple column layout
• object-fit/object-position
• Opacity
• CSS3 selectors
• Text-shadow
• Transforms
• Transitions
• 3D Transforms
• Animation
• Word-wrap
• Flexible Box Layout Module
• Grid Layout
• rem (root em) units
• Masks
• Reflections
• text-stroke
• Text-overflow

ul li

descendant selector
matches nested <li>s

ol > li

child selector 
matches <li>s in <ol> but not nested <ul>

li.myClass + li

adjacent sibling 

NEW  (IE7+)
li.myClass ~ li

general sibling selector
matches later siblings, but not nested.

Try it out

• *
• E
• .class
• #id
• E F
• E > F
• E + F
• E[attribute]
• E[attribute=value]
• E[attribute~=value]
• E[attribute|=value]
• :first-child
• :lang()
• :before
• ::before
• ::selection
• :after
• ::after
• :first-letter
• ::first-letter
• :first-line
• ::first-line
• E[attribute^=value]
• E[attribute$=value]
• E[attribute*=value]
• E ~ F
• :root
• :last-child
• :only-child
• :nth-child()
• :nth-last-child()
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type()
• :nth-last-of-type()
• :empty
• :not()
• :target
• :enabled
• :disabled
• :checked
• :indeterminate
• :default
• :valid
• :invalid
• :in-range
• :out-of-range
• :required
• :optional
• :read-only
• :read-write

element[attribute]

Select elements containing the named attribute

img[alt] {}
  selects:     
     <img src="image.jpg" alt="accessible">     
  does not select: 
     <img src="image.jpg" title="inaccessible">  
form [type] {} 
  selects:
     <input type=date>  
  does not select:
     <select>

IE6 sucks 
IE7 support basic non-empty attribute

E[attr]

Element E that has the attribute attr with any value.

E[attr="val"]

Element E that has the attribute attr with the exact, case-insensitive, value val.

E[attr|=val]

Element E whose attribute attr has a value val or begins with val- ("val" plus "-").

p[lang|="en"]{/*    <p lang="en-us">  <p lang="en-uk"> */ }

E[attr~=val]

Element E whose attribrute attr has within its value the space-separated full word val.

a[title~=more] {/* <a title="want more info about this?">}

 

E[attr^=val]

Element E whose attribute attr starts with the value val.

a[href^=mailto] {background-image: url(emailicon.gif);}  
a[href^=http]:after {content: " (" attr(href) ")";}

E[attr$=val]

Element E whose attribute attr ends in val . 

a[href$=pdf] {background-image: url(pdficon.gif);}
a[href$=pdf]:after {content: " (PDF)";}

E[attr*=val]

Element E whose attribute attr matches val anywhere within the attribute. Similar to E[attr~=val] above, except the val can be part of a word.

Note: Multiple attributes work! a[title][href]

input[placeholder] { 
/* matches any input with a placeholder */}
input[type=email] {
/* exact match */}
abbr[title~=unicorn] { 
/* matches unicorn but not unicorns */}
abbr[title|=en] { 
/* matches en-us and en-uk */}
a[href^=mailto] { 
/* starts with */}
a[href$=pdf]{ 
/* ends in */}
abbr[title*=unicorn] { 
/* matches unicorn and unicorns */}

E:[att] 
/* have the attribute at all */

E:[att=val] 
/* exact */

E:[att~=val] 
/* val is a space separated word */

E:[att|=val] 
/* with a dash */

E:[att^=val] 
/* begins with val */

E:[att$=val]  
/* ends with val */

E:[att*=val]  
/* val is anywhere as a substring */
.

@media print{
  abbr[title]:after { 
    content: "(" attr(title) ")";
  }
  a[href^=http]:after { 
    content: "(" attr(href) ")";
  }
}

Based on current state of UI

  :enabled
  
  :disabled
  
  :checked
  

Example:

input[type=checkbox]:checked + label {
  color: red;
}

:valid
:invalid
:required
:optional


:in-range
:out-of-range
:read-only
:read-write

:default

Example:

input:valid { border: 1px solid green;}
input:invalid { border: 1px solid red;}
input:required {border-width: 5px;}
input:optional {border-width: 10px;}
input:out-of-range { background-color: pink;}
input:in-range { background-color:lightgreen;}

:nth-child() 

:nth-last-child() 

:nth-of-type() 

:nth-last-of-type() 

:first-child*

:last-child 

:first-of-type 

:last-of-type 

:only-child 

:only-of-type 

:root

:empty

:not(:empty) 

• Target elements on the page based on their relationships to other elements in the DOM.
• Updates dynamically if page updates.
• Reduced need for extra markup, classes and IDs

^* CSS2 / IE8

 
:root

Selects the document root, which is <html>

• Declare font-size on :root if using rem units
• Style :root only if showing <head> (as in our exercise files)
• In CSS4, define Defining Variables on root. (see Variables module)

example

 
:first-child

:last-child 

:first-of-type 

:last-of-type 

:only-child 

:only-of-type 

Easier to explain by example

:nth-child(3n) 

:nth-last-child(odd) 

:nth-of-type(5) 

:nth-last-of-type(3n+1) 

Target element or elements based on argument passed to the selector

• :nth-of-type(even)
• :nth-of-type(odd)
• :nth-of-type(an+b)

Let's Play Note: Play with negative values for 'a'

tr:first-child,
tr:last-child {
  font-weight: bold;
}
tr:first-of-type,
tr:last-of-type{
  text-decoration:line-through;
}
tr:nth-child(even) {
  background-color: #CCC;
}
tr:nth-child(3) {
  color: #CCC;
}
tr:nth-of-type(odd) {
  background-color: #FFF;
}
tr:nth-of-type(4n) {
  color: #C61800;
}
tr:nth-of-type(3n-1) {
  font-style: italic;
}

p:empty {
  	/* styles here */
    }

Matches:

<p></p>
<p><!-- this is a comment --></p>

 div:not(.excludeMe)

Practice makes perfect

  :lang
  :target
  

link & user action pseudo-classes

  :link
  :visited
  
  :hover
  :active
  :focus
  

:target example

• selectivizr.com + JS Library = JS for backward compatibility
• jQuery $(selector) == document.querySelectorAll(selector)
• Many, many more pseudo-elements with prefixes currently treated as a shadow DOM
  • ::-webkit-progress-bar
  • ::-webkit-progress-value
  • ::-webkit-meter-even-less-good-value
  • ::-webkit-inner-spin-button /outer-spin-button
  • ::-webkit-validation-bubble / arrow-clipper /arrow /message
  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button / thumb / track
  • Mozilla Pseudo-elements and pseudo-classes