CSS Selectors & Specificity

Types of Selectors

Specificity Rank	CSS Selector Type	Examples	CSS Selector Description
1	ID Selectors	#caramel, #body p	Can target ONLY ONE item, hence is the most specific
2	Class Selectors (.), Attribute Selectors, and Pseudo-classes(	.beverages, [type="radio"], :hover	Can target multiple items with the same class name
3	Type Selectors and Pseudo-elements	h1, :before	Can target in a general way (i.e. EVERY p, h3, etc.)

CSS Rules Cascade

Last Rule

If there are two identical selectors (i.e. color: green, color: red), the latter of the two will be the rule that applies (and hence appears).

Specificity

The most specific selector is an id (#), therefore if there are class and id selectors attempting to target the same item, the id selector will "win out" over the class selector. Examples from HTML & CSS, pg. 239:

h1 is more specific than *
p b is more specific than p
p#intro is more specific than p

Important

By adding !important after a property value, you're telling the CSS to treat that item as more important than other rules applying to the same element.