1 min read

CSS Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
CSS Pseudo-classes

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus


selector:pseudo-class {
 property: value;

Anchor Pseudo-classes-->Links can be displayed in different ways:

* unvisited link */
a:link {
 color: #FF0000;

/* visited link */
a:visited {
 color: #00FF00;

/* mouse over link */
a:hover {
 color: #FF00FF;

/* selected link */
a:active {
 color: #0000FF;

Note:a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:When you hover over the link in the example, it will change color:

a.highlight:hover {
 color: #ff0000;

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.Match the first <p> element

p:first-child {
 color: blue;

CSS Pseudo-classes

#CSS #Pseudo #Class #Probyto #ProbytoAI

Subscribe and follow us for latest news in Data Science and Machine learning and stay updated!

Facebook: https://facebook.com/probyto
Twitter: https://twitter.com/probyto
LinkedIn: https://linkedin.com/company/probyto
Instagram: https://instagram.com/probyto