CSS Pseudo-class

CSS Pseudo-classes

Learn how to style elements based on their state or position using pseudo-classes.

What are Pseudo-classes?

A pseudo-class is a keyword added to a CSS selector that specifies a special state of the selected element(s). They don’t target elements based on the document tree structure alone, but on external factors like user interaction, element status, or position within siblings.

For example, you can use pseudo-classes to:

• Style an element when a user hovers over it (:hover).
• Style visited and unvisited links differently (:visited, :link).
• Style an element when it receives focus (:focus, :focus-visible).
• Style an input element that is disabled or checked (:disabled, :checked).
• Style the first or last child element among siblings (:first-child, :last-child).

Syntax

The syntax involves appending a colon (:) followed by the pseudo-class name to the selector:

selector:pseudo-class-name {
  property: value;
}

Note: Pseudo-class names are generally case-insensitive.

Distinction: Don’t confuse pseudo-classes (single colon, representing a state) with pseudo-elements (double colon ::, representing a part of an element, like ::before or ::first-line). Modern syntax uses :: for pseudo-elements, though browsers often accept a single colon for older ones for backward compatibility.

Link (Anchor) Pseudo-classes

These are among the most common pseudo-classes, used to style <a> tags based on user interaction and history:

/* Unvisited link */
a:link {
  color: #007bff;
}

/* Visited link */
a:visited {
  color: #6c757d;
}

/* Keyboard focus indicator */
a:focus-visible {
  outline: 2px solid dodgerblue;
  outline-offset: 1px;
}

/* Mouse hover */
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Link being activated (clicked) */
a:active {
  color: #dc3545; /* Example: Red when clicking */
}

Order Rule (LVF(V)HA): For these link pseudo-classes to work predictably, define them in this specific order in your CSS: :link, :visited, :focus, :focus-visible, :hover, :active. This ensures later rules correctly override earlier ones.

Combining Pseudo-classes with Classes

You can combine pseudo-classes with regular CSS classes (or other selectors) for more specific styling:

/* Style only links with class 'special-link' on hover */
a.special-link:hover {
  color: #ff8c00; /* Dark orange */
  font-weight: bold;
}

/* Style focused input fields with class 'required' */
input.required:focus {
  border-color: #28a745; /* Green border on focus */
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

This allows targeted styling based on both the element’s class and its current state.

Structural Pseudo-classes: :first-child

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

Important Note: Browser compatibility issues mentioned for old browsers like IE8 are no longer a primary concern in modern web development.

Target the first <p> element

This selector targets any <p> element that is the first child within its parent container:

/* Make the first paragraph in any container bold */
p:first-child {
  font-weight: bold;
}

Target the first <i> element within any <p>

This selector targets an <i> element only if it is the first child within a <p> element:

/* Italicize the first element inside a paragraph, only if it's an <i> tag */
p i:first-child {
  color: green;
}

Target all <i> elements within a first-child <p>

This selector targets all <i> elements that are descendants of a <p> element, but only if that <p> element is the first child of its parent:

/* Make all italics green if they are inside the first paragraph */
p:first-child i {
  color: green;
}

Related Pseudo-classes: Consider also :last-child, :nth-child(n), :first-of-type, :last-of-type, :nth-of-type(n) for more advanced positional styling.

Language Pseudo-class: :lang()

The :lang() pseudo-class allows you to apply styles based on the language of the element, as specified by the lang attribute (e.g., <p lang="fr">).

Example: Defining language-specific quotation marks for the <q> element:

/* Define French quotation marks */
:lang(fr) q {
  quotes: '« ' ' »';
}

/* Define German quotation marks */
:lang(de) q {
  quotes: '„' '“';
}

/* HTML example */
/*
<p>In English, we use <q>double quotes</q>.</p>
<p lang="fr">En français, nous utilisons <q>des guillemets</q>.</p>
<p lang="de">Auf Deutsch verwenden wir <q>Anführungszeichen</q>.</p>
*/

This is useful for internationalization (i18n) to handle typographic conventions.

More Examples

Styling Form Input on Focus: The :focus pseudo-class is essential for accessibility, indicating which form element is currently active.

input:focus {
  border: 2px solid #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none; /* Remove default browser outline if custom style is sufficient */
}

Common CSS Pseudo-classes

Here is a list of frequently used pseudo-classes grouped by category:

Link & User Action States:

Selector	Example	Description
:link	a:link	Selects unvisited links.
:visited	a:visited	Selects visited links.
:hover	button:hover	Selects element when mouse pointer is over it.
:active	button:active	Selects element when it is being activated (e.g., clicked).
:focus	input:focus	Selects element when it has keyboard/mouse focus.
:focus-visible	a:focus-visible	Selects element when it has focus and focus should be visibly drawn (usually keyboard focus).
:target	#section:target	Selects the element whose ID matches the fragment identifier in the URL.

Input & Form States:

Selector	Example	Description
:checked	input:checked	Selects checked radio buttons, checkboxes, or selected options.
:disabled	input:disabled	Selects disabled input elements.
:enabled	input:enabled	Selects enabled input elements.
:required	input:required	Selects input elements with the ‘required’ attribute.
:optional	input:optional	Selects input elements without the ‘required’ attribute.
:read-only	input:read-only	Selects elements with the ‘readonly’ attribute.
:read-write	input:read-write	Selects elements without the ‘readonly’ attribute.
:valid	input:valid	Selects input elements with valid content according to type/pattern constraints.
:invalid	input:invalid	Selects input elements with invalid content.
:in-range	input:in-range	Selects input elements whose value is within the specified min/max range.
:out-of-range	input:out-of-range	Selects input elements whose value is outside the specified min/max range.

Structural & Positional:

Selector	Example	Description
:root	:root	Selects the root element of the document (usually <html>).
:empty	p:empty	Selects elements that have no children (including text nodes).
:first-child	li:first-child	Selects the first element among siblings.
:last-child	li:last-child	Selects the last element among siblings.
:only-child	p:only-child	Selects an element that is the only child of its parent.
:first-of-type	h2:first-of-type	Selects the first element of its type among siblings.
:last-of-type	h2:last-of-type	Selects the last element of its type among siblings.
:only-of-type	p:only-of-type	Selects an element that is the only one of its type among siblings.
:nth-child(n)	tr:nth-child(even)	Selects elements based on their position among siblings (e.g., even rows).
:nth-last-child(n)	li:nth-last-child(2)	Selects elements based on position, counting from the end.
:nth-of-type(n)	p:nth-of-type(3)	Selects the nth element of its type among siblings.
:nth-last-of-type(n)	p:nth-last-of-type(1)	Selects the nth element of its type, counting from the end.

Logical Combinations:

Selector	Example	Description
:not(selector)	:not(.disabled)	Selects elements that do not match the provided selector.
:is(selector-list)	:is(header, footer) p	Selects elements that match any selector in the list (simplifies grouping).
:where(selector-list)	:where(header, footer) p	Similar to :is(), but has zero specificity.

Common CSS Pseudo-elements

Pseudo-elements select and style a part of an element. Remember the standard double-colon syntax ::.

Selector	Example	Description
::before	p::before	Inserts generated content before the content of the element.
::after	p::after	Inserts generated content after the content of the element.
::first-letter	p::first-letter	Selects the first letter of a block-level element.
::first-line	p::first-line	Selects the first line of a block-level element.
::marker	li::marker	Selects the marker box of a list item (e.g., the bullet point or number).
::selection	p::selection	Selects the portion of an element that is currently highlighted (selected) by the user.

Mastering pseudo-classes and pseudo-elements unlocks sophisticated styling possibilities in CSS.