and to change slides. 2 for comments. estelle.github.com/CSS-Workshop

CSS: from Knowledgable to Ninja

◈ Estelle Weyl

@estellevw

www.standardista.com

Part 2: Specificity

Understanding Specificity

  • ID
  • Class
  • Element
  • 1-0-0
  • 0-1-0
  • 0-0-1

PDF
Examples

Specificity: The less than obvious

The * selector, or global selector, has no value.

* {} 0-0-0 

Combinators, like ~, >, and + have no value

ul li {} 0-0-2
ul > li {} 0-0-2

:not has no value, but parameter selector does

.myClass:not(p) {} 0-1-1

Specificity is not inheritance

Play Time

Try it out

Part 3: Generated Content

Next ➹