CSS Pseudo Classes and Pseudo Elements

In this tutorial you'll learn what are the CSS pseudo classes and pseudo elements and how they are used.

CSS Pseudo-Classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user hovers over it
• Style visited and unvisited links differently
• Style an element when it receives focus

Syntax

The syntax for pseudo-classes is as follows.

selector:pseudo-class {
  property: value;
}

Pseudo-classes are defined using a single colon (:) in CSS.

HTML Links Pseudo-classes

You can style different states of the HTML link elements in a web page in various ways by using pseudo classes as shown below:

/* Unvisited link will display in blue color */
a:link {
  color: blue;
}
/* visited link will display in purple color */
a:visited {
  color: purple;
}
/* Mouse over link will display in red color */
a:hover {
  color: red;
}
/* Selected link will display in black color */
a:active {
  color: black;
}

Note: In your CSS, a:hover must appear after a:link and a:visited to work properly. Similarly, a:active must come after a:hover to be effective. Pseudo-class names are not case-sensitive.

Pseudo-Classes and HTML Classes

Pseudo-classes can be combined with HTML classes as shown below:

a.footer-links:hover {
  color: grey;
}

Hover on <div>

Here’s an example of using the :hover pseudo-class on a <div> element:

div:hover {
  background-color: lightblue;
}

Show Text on Hover

Hover over a <div> element to display a <p> element (text):

p {
  display: none;
}
div:hover p {
  display: block;
}

The :first-child Pseudo-Class

The :first-child pseudo-class selects an element that is the first child of its parent.

In the following example, the selector targets any <p> element that is the first child of its parent element.

p:first-child {
  color: red;
}

The :first-of-type Pseudo-Class

The :first-of-type pseudo class selects the first instance of the HTML element within the parent element.

In the following example, the selector targets the first <p> element within each <div> element.

div p:first-of-type {
  color: red;
}

In the following example, the CSS selector targets all <span> elements within those <p> elements that are the first child of their parent.

p:first-of-type span {
  color: darkblue;
}

The :lang Pseudo-class

The :lang pseudo-class enables you to apply specific styles based on language.

In the example below, :lang is used to set the color for <span> elements when lang="ru" (Russian).

span:lang(ru) {
  color: blue;
}

<p>"Some text" in Russian:<span lang="ru">Немного текста</span></p>

The preview of above CSS will look like this:

CSS Pseudo-Elements

A CSS pseudo-element is used to apply styles to specific parts of an element. For example, it can be used to:

• Style the first letter or first line of an element
• Insert content before or after the existing content of an element

Syntax

The syntax for using pseudo-elements.

selector::pseudo-element {
  property: value;
}

In CSS3, the double colon (::) is used for pseudo-elements to distinguish them from pseudo-classes, which use a single colon (:).

In CSS2 and CSS1, the single-colon syntax was used for both pseudo-classes and pseudo-elements. For backward compatibility, the single-colon syntax is still acceptable for pseudo-elements defined in CSS2 and CSS1.

The ::first-line Pseudo-Element

The ::first-line pseudo-element applies a special style to the first line of text.

In the example below, the first line of text in all <p> elements is styled:

p::first-line {
  color: red;
  font-variant: small-caps;
  font-weight: bold;
}

Note: The ::first-line pseudo-element can only be used with block-level elements.

The following properties can be applied to the ::first-line pseudo-element:

• Font properties
• Color properties
• Background properties
• Word spacing
• Letter spacing
• Text decoration
• Vertical alignment
• Text transform
• Line height
• Clear

The ::first-letter Pseudo-Element

The ::first-letter pseudo-element applies a special style to the first letter of a text.

Here is an example that styles the first letter of text in all <p> elements:

p::first-letter {
  color: red;
  font-size: xx-large;
} 

Note: The ::first-letter pseudo-element can only be applied to block-level elements.

The following properties can be applied to the ::first-letter pseudo- element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

Pseudo-Elements and HTML Classes

Pseudo-elements can be combined with HTML classes:

p.intro::first-letter {
  color: red;
  font-size: 100%;
}

Multiple Pseudo-Elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be blue, in a large font size. The rest of the first line will be orange. The rest of the paragraph will have the default font size and color.

p::first-letter {
  color: blue;
  font-size: 32px;
}
p::first-line {
  color: orange;
}

The ::before Pseudo-Element

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an icon before the content of each <h1> element.

h1::before {
  content: url('h1-icon.png');
}

The ::after Pseudo-Element

The ::after pseudo-element can be used to insert some content after the content of an element. 

The following example inserts an icon after the content of each <h1> element.

h1::after {
  content: url('h1-icon.png');
}

The ::marker Pseudo-Element

The ::marker pseudo-element selects the markers of list items. The following example customizes the appearance of list item markers.

::marker {
  color: blue;
}

The ::selection Pseudo-Element

The ::selection pseudo-element matches the portion of an element that is selected by a user. The following CSS properties can be applied to ::selection:

• color
• background
• outline

::selection {
  color: green;
  background: yellow;
}