CSS Pseudo Classes And Elements
What Are CSS Pseudo Classes?
Pseudo classes are used in CSS to define a specific state of an element.
Basic syntax for using pseudo class is,
element:pseudo_class { property: value; }
Pseudo classes are mostly used by web designers to define the dynamic states of an element based on user interaction.
like,
- Applying a style to an element when users hover over it.
- Style an element when it gets focus.
Example of Pseudo Classes
| Pseudo Class | Description |
| :active | For styling active links |
| :checked | For styling every checked element |
| :disabled | For styling every disabled element |
| :empty | For styling every element that has no children |
| :enabled | For styling every enabled element |
| :first-child | For styling every elements that is the first child of its parent |
| :first-of-type | For styling every element that is the first element of its parent |
| :focus | For styling the element that has focus |
| :hover | For styling links on mouse over |
| :in-range | For styling elements with a value within a specified range |
| :invalid | For styling all elements with an invalid value |
| :lang(language) | For styling every element with a lang attribute value. |
| :last-child | For styling every elements that is the last child of its parent |
| :last-of-type | For styling every element that is the last element of its parent |
| :link | For styling all unvisited links |
| :not(selector) | For styling every element that is not a element |
| :nth-child(n) | For styling every element that is the second child of its parent |
| :nth-last-child(n) | For styling every element that is the second child of its parent |
| :nth-last-of-type(n) | For styling every element that is the second element of its parent |
| :nth-of-type(n) | For styling every element that is the second element of its parent |
| :only-of-type | For styling every element that is the only element of its parent |
| :only-child | For styling every element that is the only child of its parent |
| :optional | For styling elements with no “required” attribute |
| :out-of-range | For styling elements with a value outside a range |
| :read-only | For styling elements with a “readonly” attribute |
| :read-write | For styling elements with no “read only” attribute |
| :required | For styling elements with a “required” attribute |
| :root | For styling the document root element |
| :target | For styling the current active element |
| :valid | For styling all elements with a valid value |
| :visited | For styling all visited links |
What Are Pseudo Elements?
Pseudo elements differ from pseudo classes in that, they are used to style a specific ‘part’ of an element.
If you need to insert certain content after or before an element you can use “Pseudo elements”
Basic syntax for using pseudo class is,
element::pseudo_element { property: value; }
Some pseudo elements are,
| Pseudo Element | Description |
| ::after | Insert content after |
| ::before | Insert content before |
| ::first-letter | Style the first letter |
| ::first-line | Style the first line |
| ::selection | Style the portion of an element that is selected by a user |
