CSS Pseudo-class

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

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.


The directionality pseudo-class selects an element based on its directionality as determined by the document language.


Select an element based on its content language.

q:lang(no) {
  quotes: "~" "~";

<p>Knowledge  <q lang="no">A quote in a paragraph</q> is power.</p>


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.


Matches an element if the element would match either 

:link or :visited.:link

Matches links that have not yet been visited.


Matches links that have been visited.


Matches links whose absolute URL is the same as the target URL, for example anchor links to the same page.


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.


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.


Represents a media element that is capable of playing when that element is playing.


Represents a media element that is capable of playing when that element is paused.

Return to html