Last Commit: 2024-01-06 17:50:27

views:

Table of Content

Pseudo Classes and Pseudo Elements

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

Pseudo Classes

A pseudo-class filters existing elements when the filter condition is not exist in DOM, such as hover and active.

Example: :hover

  • :hover: Selects links on mouse over
<div class="test-class">
  <p>first line</p>
</div>
<style>
.test-class p:hover {
    color: red;
}
</style>

Pseudo Elements

A pseudo-element is a new fake element when the selected elements is not exist in DOM, such as first character in a <p> tag.

Example: ::before and ::after

  • ::before: Insert content before every <p> element
  • ::after: Insert content after every <p> element
<div class="test-elements">
  <p>first line</p>
  <p>second line</p>
  <p>third line</p>
</div>
<style>
.test-elements p::after {
    content: " - after";
}
.test-elements p::before {
    content: "before - ";
}
</style>

Reference