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 |
Sharing is caring!
GMI’s Research Team is a panel of knowledgeable experts from various fields such as digital marketing, social media, and web development, all united by a common goal—to educate. We enjoy exploring everything from the latest industry trends and emerging technologies to people and demographics, both in the UAE and beyond. Through our blog posts, we share valuable insights that help businesses and marketers stay informed and prepared for the challenges and opportunities that lie ahead.
