CSS pseudo classes

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

pseudo classes

CSS pseudo-classes select elements not based on their names, but based on their state.

For example, when you want to set the style for different states ( active, hover etc ) of the hyperlink, you can not do that by simply selecting the a element. You need to use CSS pseudo classes in these cases.

CSS pseudo-classes always start with a ":".

syntax:

elementName:CSS_Pseudo_Class{ CSS-Property: value; ........................ }

CSS :first-child pseudo classes

CSS :first-child pseudo classes select the first child element of an element. It ignores all other children within the selected element even if they are available.

Example of CSS :first-child pseudo classes

CSS code:

 div > p:first-child {
background-color: lime; /* sets background color as lime */ 
color: darkgreen; /* sets textcolor as lightyellow */
}

HTML code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS first child pseudo class</title>
<link rel='stylesheet' href='Example-of-CSS-first-child-pseudo-class.css' type='text/css'>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.</p>
<p>Quisque aliquam nunc vel arcu varius aliquam. Vestibulum euismod nulla id nulla suscipit sollicitudin.</p>
</div>
</body>
</html>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.

Quisque aliquam nunc vel arcu varius aliquam. Vestibulum euismod nulla id nulla suscipit sollicitudin.

View this example of CSS first child pseudo class in a separate browser window.

CSS link pseudo-classes - :link and :visited

CSS :link pseudo-class is used to describe presentation for links that have not yet been visited.

CSS :visited pseudo-class is used to describe presentation once the link has been visited by the user.

Example of CSS link pseudo-classes - :link and :visited

CSS code:

a:link {color: red } /* sets link color to red */ 
a:visited {color: darkgreen}  /* sets link visited color to darkgreen */

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS link and visited pseudo classes</title>
<link rel='stylesheet' href='Example-of-CSS-link-and-visited-pseudo-classes.css' type='text/css'>
</head>
<body>
<a href="/index.php">w3resource tutorials</a>
</body>
</html>

View this example of CSS link pseudo-classes - :link and :visited in a separate browser window.

CSS dynamic pseudo-classes: :hover, :active, and :focus

CSS :hover pseudo class is used to describe the presentation of a hyperlink, when the user moves the mouse ( or any other pointing device ) over it.

CSS :active pseudo class is used to describe the presentation of a hyperlink, when the user presses mouse ( or any other pointing device ) button on it but yet to release it.

CSS :active pseudo class is used to describe the presentation of a hyperlink, when the user focuses (i.e. accepts keyboard events or other forms of text input) on it.

CSS code:

a:active {color: yellow } /* sets link active color to yellow */ 
a:hover {color: pink}  /* sets link hover color to  pink */
a:focus {color: maroon}  /* sets link focus color to  maroon */

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS link and visited pseudo classes</title>
<link rel='stylesheet' href='Example-of-CSS-dynamic-pseudo-classes-hover-active-and-focus.css' type='text/css'>
</head>
<body>
<a href="/index.php">w3resource tutorials</a>
</body>
</html>

View this example of CSS dynamic-pseudo-classes-hover-active-and-focus in a separate browser window.

CSS pseudo classes: :lang

CSS pseudo-class :lang(languageName) matches if the element is in language - languageName.

CSS code:

:lang(fr){color: red;}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS :lang  pseudo classes</title>
<link rel='stylesheet' href='Example-of-CSS-pseudo-classes-lang.css' type='text/css'>
</head>
<body>
<p lang="fr">L'élève va à l'école et ceci est écrit en Français!</p>
<p lang="en">This text is goign to be effected by stylesheet.</p>
</body>
</html>

View this example of CSS pseudo classes: :lang in a separate browser window.

Previous: CSS id selectors
Next: CSS pseudo elements