| Type | Example | Description | Link |
|---|---|---|---|
| Universal selectors | * | The CSS universal selector (*) matches elements of any type. | MDN Universal selectors |
| Element names and pseudo-elements | h1, ::before | The CSS type selector selects all elements of the given type within a document | MDN Type selectors |
| Class selector and pseudo-classes | .menu, :hover | The CSS class selector matches elements based on the contents of their class attribute. | MDN Class selectors |
| Attribute selectors | div[lang] | The CSS attribute selector matches elements based on the presence or value of a given attribute. | MDN Attribute selectors |
| ID selectors | #navbar | The CSS ID selector matches an element based on the value of the element’s id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector. | MDN ID selectors |
| !important | !important | The CSS universal selector (*) matches elements of any type. | MDN !important |
| Type | Specifity value | Notes |
|---|---|---|
| Universal selectors | 0 | Universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.) |
| Element names and pseudo-elements | 1 | Prime selectors with the lowest specifity. |
| Class selector, pseudo-classes and attribute selectors | 10 | A class selector beats any number of element selectors |
| ID selectors | 100 | ID selectors have a higher specificity than attribute selectors |
| Inline styles | 1000 | Your global CSS file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. |
| !important | 10000 | When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity. |