CSS Specificity - Lightning Talk

css-specificity.md

Specificity determines, which CSS rule is applied by browsers.

General Rule: You want to be as specific as it makes sense to be. If some styling isn't applied to an element, check the specificity.

Most specific to least specific

1. Inline Styles

An inline style lives within your HTML document. It is attached directly to the element to be styled.

<h1 style="color: #fff;">

2. IDs

#id_name{}

3. Classes, Attributes, and Pseudo-classes

   Classes: .class_name{}

   Attributes: span[lang]{}

   Pseudo-class: a:hover{} a:focus{}

4. Elements and Pseudo-elements

   Elements: p{} h3{}

   Pseudo-elements: :before{} :after{}

Specificity is actually a value attributed to each CSS selector. Read about it here

Resources:

Brief overview

Mozilla docs

Great presentation. Speak up though.

Thanks, Stephen