CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button’s color when the user’s pointer hovers over it.Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
CSS Pseudo-class (Anchor)
Links can be displayed in different ways:
/* 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;
}
CSS Pseudo-class (Linguistics)
These pseudo-classes reflect the document language, and enable the selection of elements based on language or script direction.
:dir
The directionality pseudo-class selects an element based on its directionality as determined by the document language.
:lang
Select an element based on its content language.
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Knowledge <q lang="no">A quote in a paragraph</q> is power.</p>
</body>
</html>
CSS Pseudo-class & CSS class
Pseudo-classes can be combined with CSS classes:
When you hover over the link in the example, it will change color:
a.highlight:hover {
color: #ff0000;
}
These pseudo-classes relate to links, and to targeted elements within the current document.
:any-link
Matches an element if the element would match either
:link or :visited.:link
Matches links that have not yet been visited.
:visited
Matches links that have been visited.
:local-link
Matches links whose absolute URL is the same as the target URL, for example anchor links to the same page.
:target-within
Matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.
:scope
Represents elements that are a reference point for selectors to match against.
Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
p:first-child i {
color: blue;
}
CSS Pseudo-class (Resource state)
These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.
:playing
Represents a media element that is capable of playing when that element is playing.
:paused
Represents a media element that is capable of playing when that element is paused.
Return to html