CSS pseudo classes and pseudo elements are powerful tools that can be used to add extra functionality and style to your web pages. They allow you to target specific elements or states of elements, and to add content before or after an element.

In this article, we will discuss the basics of CSS pseudo classes and pseudo elements, and we will provide some code examples to show you how to use them.

What are CSS pseudo classes?

CSS pseudo classes are special selectors that allow you to target specific states of an element. For example, you can use the :hover pseudo class to target an element when the user hovers over it, or the :active pseudo class to target an element when the user clicks on it.

Here is a list of some of the most commonly used CSS pseudo classes:

  • :hover - This pseudo class targets an element when the user hovers over it.
  • :active - This pseudo class targets an element when the user clicks on it.
  • :focus - This pseudo class targets an element when the user focuses on it.
  • :checked - This pseudo class targets an element when it is checked.
  • :selected - This pseudo class targets an element when it is selected.

What are CSS pseudo elements?

CSS pseudo elements are special pseudo selectors that allow you to add content before or after an element. For example, you can use the ::first-letter pseudo element to add a special style to the first letter of an element, or the ::after pseudo element to add content after an element.

Here is a list of some of the most commonly used CSS pseudo elements:

  • ::first-letter - This pseudo element adds content to the first letter of an element.
  • ::after - This pseudo element adds content after an element.
  • ::before - This pseudo element adds content before an element.

How to use CSS pseudo classes and pseudo elements

CSS pseudo classes and pseudo elements are used in the same way as regular CSS selectors. They are placed after the element selector, and they are separated from the element selector by a colon.

For example, the following code will add a red border to all links that the user has visited:

a:visited {
  border: 1px solid red;
}

Code examples

Here are some code examples that show you how to use CSS pseudo classes and pseudo elements:

  • Hover effect: The following code will add a yellow background to all links when the user hovers over them:
    a:hover {
  background-color: yellow;
}
  • Active state: The following code will add a blue border to all links when the user clicks on them:
    a:active {
  border: 1px solid blue;
}
  • First letter: The following code will add a special style to the first letter of all h1 elements:
    h1::first-letter {
  font-size: 2em;
  color: red;
}
  • After content: The following code will add a "Powered by GPTBlogs" text after all div elements:

Conclusion

CSS pseudo classes and pseudo elements are powerful tools that can be used to add extra functionality and style to your web pages. They allow you to target specific elements or states of elements, and to add content before or after an element.

If you are looking for ways to improve the look and feel of your web pages, I encourage you to learn more about CSS pseudo classes and pseudo elements.