CSS Selectors
| Selector | Example | Notes |
|---|---|---|
| Universal | *{} | Selects everything |
| Type | p{} | Selects all paragraph elements |
| Class | .class{} | Selects all elements with class |
| Id | #name{} | Selects the element with given ID |
| Pseudo classes | p:hover{} | Applies style when hovering over the paragraph element |
| Chaining | h2.class{} | Selects the h2 elements with a given class |
| Grouping | p, h1, h2{} | Applies the same style to multiple elements |
| Descendant | .class li{} | Selects the list elements within the element with a given class |
| Child | header > h1{} | selects all h1 elements that are children of the header |
| Adjacent sibling | div + p{} | Selects an element that immediately follows a specific element |
| General sibling | div ~ p{} | Selects all p elements that are siblings to the div element |
CSS Specifity
When there are multiple stylings for the same element, specifity will decide which will get higher priority.
- Inline styles
- IDs
- Classes
- Type
- Universal