Understanding CSS part-3

Pseudo Classes

Anchor Pseudo-classes

Hover on <div>

Matching First Child Elements

Pseudo-classes are used in order to define a specific state of an element. Examples for uses of pseudo-classes are as follows: styling a specific element with a mover hover, or whether a link was visited or not, as well as when an element is focused on. The syntax for a pseudo-class is as follows:

selector:pseudo-class {
  property: value;
}

Anchor pseudo-classes are specifically for links and the syntax is as follows:

/* 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;
}

Hover on <div> can be used to show more information if it is not as important at the moment and the syntax is as follows:

div:hover {
  background-color: blue;
}

A specific example of hover is as follows:

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

The :first-child pseudo-class matches a specified element that is the first child of another element. Examples for :first-child are as follows:

p:first-child { 
  color: blue;
} // in this example we are selecting the first "p" element
p i:first-child { 
  color: blue;
}//here the first "i" && "p" elements
p:first-child i { 
  color: blue;
}//here we match all <i> elements in <p> elements that are the first child

Thank you for reading my blog, I hope you have a great day!