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!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store