© Heidi Brebels 2023
CSS Selectors
| Selector | Elements | Comment |
| Universal selector | * { } | Applies to the whole document |
| Type selector | body { }, p {}, ul {} | Applies to that element everywhere in the document |
| Descendant selector | h1 em {} | Applies to every em inside an h1 |
| Class selector | .classname {} | Applies to every element with classname in its class attribute |
| ID selector | #idname {} | Applies to every element with idname as its ID |
| Child selector | div > a {} | Applies only to the a's that are direct children of the div |
| Adjacent sibling selector | h2 + p {} | Applies to the p's that follow an h2 and that are on the same level as the h2 |
| General sibling selector | ul ~ p {} | Applies to every p that follows a ul and is on the same level as the ul |
| Attribute selector | [class] {} | Applies to every element that has a class attribute |
| a[class] {} | Applies to every a element that has a class attribute | |
| a[class~="name"] {} | Applies to every a element that has a class attribute and the class attribute has "name" in it |
| Selector | Elements | Comment |
| Link Pseudo classes | a:link {} | Applies to all links that have not been visited |
| input:focus {}, a:focus {} | Applies when the element has focus | |
| :focus {} | Applies to any element ready to receive user input | |
| Structural pseudo classes | li:first-child {} | Applies to the first child of its parent |
| li:last-child {} | Applies to the last child of its parent | |
| b:only-child {} | Applies if it's the only child of it's parent. (not just other b's, but any other element in the parent) |