In addition to tag, class, and ID selectors, pseudo-class selectors are available to us, which provide additional options for selecting the desired elements.
List of available pseudo-classes:
- :root : allows you to select the root element of the web page, probably the least useful selector, since on a proper web page the root element is almost always the element <html>
- :link : applies to links and represents a link in its normal state that hasn’t been followed yet
- :visited : applied to links and represents a link that the user has already visited
- :active : applied to links and represents the link at the moment the user navigates it
- :hover : represents the element that the user hovered over with the mouse. Applies primarily to links, but can also be applied to other elements such as paragraphs.
- :focus : represents the element that receives focus, i.e. when the user presses the tab key or clicks the mouse button on an input field (such as a text field)
- :not : allows you to exclude elements from the list of elements to which the style is applied
- :lang : styles elements based on the value of an attribute lang
- :empty : selects elements that have no nested elements, i.e. are empty
When using pseudo-classes, they are always preceded by a colon. For example, we style links using pseudo-classes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-classes in CSS3</title>
</head>
<body>
<a href="index.html">CSS3 Tutorial</a>
<input type="text" />
</body>
</html>
Selector :not
The :not() selector allows you to select all elements except certain ones, that is, to exclude some elements from the selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-classes in CSS3</title>
</head>
<body>
<a>First link</a><br />
<a class="blueLink">Second link
</a><br />
<a>Third link </a>
</body>
</html>
The selector a:not(.blueLink)applies the style to all links except those with the “blueLink” class. Parentheses are passed to the not pseudo-class with a selector of elements to be excluded.
Pseudo-class :lang
The :lang selector selects elements based on the lang:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors in CSS3</title>
</head>
<body>
<form>
<p lang="en-GB">I'm learning CSS3</p>
<p lang="en-US">I study CSS3</p>
<p lang="de-DE">Ich lerne CSS3</p>
</form>
</body>
</html>