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 |
