CSS Pseudo-classes

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

EXAMPLE:

a:link {
     background-color: yellow;
}
a:visited {
     background-color: cyan;
}
a:hover {
     background-color: lightgreen;
}
a:active {
     background-color: hotpink;
}

Run

➢Pseudo-classes can be combined with HTML classes:

EXAMPLE:

a.highlight:hover {
color: #ff0000;
}

Run

EXAMPLE:

div:hover {
background-color: blue;
}

Run

CSS - The :first-child Pseudo-class

➢The :first-child pseudo-class matches a specified element that is the first child of another element.

EXAMPLE:

p:first-child {
color: blue;
}

Run

➢Match the first <i> element in all <p> elements

EXAMPLE:

p i:first-child {
color: blue;
}

Run

➢Match all <i> elements in all first child <p> elements

EXAMPLE:

p:first-child i {
color: blue;
}

Run

Prev Page Next Page