Selectors and specificity

Selectors

• selector: a keyword used to query your html tags, classes, ids -- (the last two are html attributes)
• rules: the style attributes you are going to set

Basic Selectors

• tags (practice: tag selectors)
• classes (practice: class selectors)
• ids (practice: id selectors)

Complex Selectors are

• any combination of the above three basic selectors
• multiple class selectors
• complex css selectors
• css class selectors

Specificity

1. not all selectors are created equal
   1. tags -> 1
   2. classes -> 10
   3. ids -> 100
2. you can calculate the specificity of a selector by adding up all the values
3. ie: body.my-class#my-id has a specificity of: 111
   1. body -> 1
   2. .my-class -> 10
   3. #my-id -> 100
   4. so 1 + 10 + 100 = 111

Practice

1. this
2. this
3. this..?

Toggle sidebar