Prev Page Next Page
Top

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





FEEDBACK