Quick review about CSS selectors
- There are 5 categories of CSS selectors
- Simple selectors - based on name, id, class
- Combinator selectors - based on elements' relationship
- Pseudo-class selectors - based on state
- Pseudo-elements selectors - selects and style a part of an element
- Attribute selectors - based on an attribute or attribute value
I. Simple selectors
| Selector | Example | Description |
|---|---|---|
| #id | #main-heading | Selects elem with id="main-heading" |
| .class | .container | Selects all elem with class="container" |
| element.class | div.container | Selects only div elems with class="container" |
| * - universal selector | * | Selects all elems |
| element | p | Selects all <p> elems |
| element, element | div, p | Selects all <div> and <p> elems |
II. Combination selectors
1. Child selectors
- Select direct child:
body > ol - Select child and grandchild using whitespace:
body li
2. Adjacent selector using +
- Selects element which comes directly after another element.
- Selects p element which comes after h1:
h1 + p
3. Sibling selector using ~
- Selects all elements which comes after an element
- Selects all p elements which comes after h1:
h1 ~ p
III. Pseudo-class selectors: selector:pseudo-class-keyword{style}
- Display state
| pseudo-class-keyword | Description |
|---|---|
| :fullscreen | Matches elem is currently in fullscreen mode |
| :modal | - |
| :picture-in-picture | - |
- Input
| pseudo-class-keyword | Description |
|---|---|
| :autofill | Matches an input tag is autofilled |
| :enable | - |
| :disable | - |
| :read-only | - |
| :read-write | - |
| :placeholder-shown | Matches an input elem which displays placeholder text |
| :default | - |
| :checked | Matches checkboxes and radio btn are checked |
| :interminate | - |
| :blank | - |
| :valid | - |
| :invalid | - |
| :in-range | - |
| :out-of-range | - |
| :required | - |
| :optional | - |
| :user-invalid | - |
- Behavioral - user action
| pseudo-class-keyword | Description |
|---|---|
| :hover | Matches when the mouse is pointing to an item |
| :active | Matches when the item is clicked |
| :visited | Matches when the link is visited |
| :focus | Matches when an elem has focus |
- Structural
| pseudo-class-keyword | Description |
|---|---|
| :only-child | Matches elem which has no siblings |
| :first-child | Matches elem which is the first of its siblings |
| :last-child | Matches elem which is the last of its siblings |
| :first-of-tytpe | Matches elem which is the first of its siblings and matches a specific type |
| :last-of-type | Matches elem which is the last of its siblings and matches a specific type |
| :nth-child(number/even/odd/formular ex: 2n +1 ) | Using formula to select elems from a list of sibling elems |
| :nth-last-child(number/even/odd/formular ex: 2n +1 ) | Using formula to select elems from a list of sibling elems, counting backwards |
| :nth-of-type | Using formula to select elems from a list of sibling elems matching a specific type |
| :nth-last-type-of | Using formula to select elems from a list of sibling elems matching a specific type, couting backwards |
- Functional
| pseudo-class-keyword | Example | Description |
|---|---|---|
| :is(selectors) | :is(ol,ul) | Matches elems which matches any of the selectors provided in the list |
| :not(selectors) | :not(:placeholder-shown) | Selects elems which dont match a list of selectors |
| :where(selectors) | :where(ol, ul) | Same as :is but :where has 0 specificity so its easy to be override by simple selector |
| :has(relative selectors) | h1:has( + p) | Selects parent elem or prev sibling elems ( Selects and applies style on h1 which is followed by p |
IV. Pseudo-elements selectors selector::pseudo-element{style}
| pseudo-element-keyword | Description |
|---|---|
| ::after | Creates a pseudo elem which is the last child of the selected elem |
| ::before | Creates a pseudo elem which is the first child of the selected elem |
| ::first-letter | Applies style on the first letter of the first line of block-level elem |
| ::first-line | Applies style on the first line of block-level elem |
| ::placeholder | Applies style on the placeholder text of elem |
| ::selection | Applies style on the elem which is highlighted by user |
V. Attribute selectors using []
- Selects a tag which has a title:
a[title] - Selects a tag which its title value is click me:
a[title="click me"] - Selects div tag which has one of classes named container:
div[class~="container"] - Selects a tag which its href attr ends with html :
a[href$="html"] - Selects a tag which its href attr starts with http:
a[href^="http"]