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

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