CSS Pseudo-classes

What Pseudo-classes Are

CSS pseudo-classes are extensions of selectors that allow applying styles based on the state, position, or content of an element without modifying the HTML.

Categories of Pseudo-classes

Interaction: :hover, :focus, :active, :visited, :checked, :link
Structural: :first-child, :last-child, :nth-child(), :nth-of-type(), :only-child, :not(), :empty
State: :disabled, :enabled, :target, :valid, :invalid, :required, :optional
Advanced: :has(), :is(), :where()

:hover

Description: Selects the element when the user hovers the mouse over it.

Usage: Frequently used for visual effects, such as changing color or displaying a menu.

Compatibility: Works on most elements, but is most commonly applied to links, buttons, or images.

Example: When hovering over the link below, its color changes.

🔧 Example: :hover

<a href="#">Interactive link</a>

a {
  color: navy;
  text-decoration: none;
}
a:hover {
  color: crimson;
  text-decoration: underline;
}

:focus

Description: Applies when an element receives focus, usually by clicking or navigating with the keyboard (Tab).

Usage: Useful for highlighting active form fields.

Compatibility: Applies to focusable elements: input, textarea, button, link.

Example: When you click on the input below, its style changes.

🔧 Example: :focus

<input type="text" placeholder="Type here">

input:focus {
  border: 2px solid royalblue;
  background-color: #eef;
  outline: none;
}

:active

Description: Applies at the moment an element is activated, i.e., while it is being pressed.

Usage: You can create visual effects for buttons or links during interaction.

Compatibility: Works on interactive elements: buttons, links, inputs.

Example: Press the button below and notice the change.

🔧 Example: :active

<button>Press</button>

button:active {
  background-color: darkgray;
  transform: scale(0.98);
}

:visited

Description: Applies to links that have already been visited by the user.

Usage: Useful to visually differentiate visited links from unvisited ones.

Compatibility: Applies only to <a> elements with an href attribute.

Example: After visiting the link below, its color will change.

🔧 Example: :visited

<a href="https://example.com" target="_blank">Visit this link</a>

a:visited {
  color: purple;
}

:checked

Description: Applies to checkbox or radio elements that are checked.

Usage: Used to style selected elements in forms.

Compatibility: Applies to <input type="checkbox"> and <input type="radio">.

Example: When you check the box below, its style changes.

🔧 Example: :checked

<label><input type="checkbox"> Check me</label>

input:checked {
  accent-color: green;
}

:link

Description: Applies to links that have not yet been visited by the user.

Usage: Used to style unvisited links, giving them a distinct appearance from already visited ones.

Compatibility: Applies only to <a> elements with an href attribute.

Example: The link below will have a different style until it is visited.

🔧 Example: :link

<a href="https://example.com" target="_blank">Visit this link</a>

a:link {
  color: blue;
  text-decoration: underline;
}

Structural Pseudo-classes

Structural pseudo-classes allow selecting elements based on their position in the DOM tree or their relationship with other elements. They are useful for applying styles without modifying the HTML, relying only on positioning and type.

:first-child

Description: Selects the first child of a parent element.

Usage: Useful for highlighting or styling the first element in a list, section, or group.

Compatibility: Works on any element that is the first child within its parent.

Example: The first paragraph in the container below will be highlighted.

🔧 Example: :first-child

<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

div p:first-child {
  color: red;
  font-weight: bold;
}

:last-child

Description: Selects the last child of a parent element.

Usage: Useful for applying special styles to the last element in a group, list, or section.

Compatibility: Works on any element that is the last child within its parent.

Example: The last paragraph in the container below will be highlighted.

🔧 Example: :last-child

<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Last paragraph</p>
</div>

div p:last-child {
  color: green;
  font-style: italic;
}

:nth-child()

Description: Selects elements at a specific position within the parent, based on a numeric index or expression.

Usage: Extremely flexible — you can select the second element, every third, or even odd/even positions.

Compatibility: Works on any element with a clear position within its parent.

Example: The second paragraph in the container below will be highlighted.

🔧 Example: :nth-child(2)

<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

div p:nth-child(2) {
  background-color: yellow;
  padding: 5px;
}

:nth-of-type()

Description: Selects elements at a specific position within the parent, but only among elements of the same type.

Usage: Useful when you have multiple types of elements in the same container and want to style only the n-th element of a certain type.

Compatibility: Works on any element with siblings of the same type within its parent.

Example: The second paragraph (not the second child!) in the container below will be highlighted.

🔧 Example: :nth-of-type(2)

<div>
  <p>First paragraph</p>
  <span>A span between paragraphs</span>
  <p>Second paragraph</p>
</div>

div p:nth-of-type(2) {
  background-color: lightblue;
  border-left: 4px solid blue;
  padding-left: 8px;
}

:only-child

Description: Selects an element that is the only child of its parent.

Usage: Useful for applying special styles when an element has no siblings.

Compatibility: Works on any element that is the only child within its parent.

Example: The paragraph below will be highlighted only if it is the sole child of the container.

🔧 Example: :only-child

<div>
  <p>The only paragraph</p>
</div>

div p:only-child {
  border: 2px dashed orange;
  padding: 10px;
}

:not()

Description: Selects all elements that do not match the specified selector.

Usage: Extremely useful for excluding certain elements from a set without directly modifying them.

Compatibility: Works on any HTML element, in combination with any valid selector.

Example: All paragraphs that do not have the class .exclus will be highlighted.

🔧 Example: :not()

<div>
  <p>Normal paragraph</p>
  <p class="exclus">Excluded paragraph</p>
  <p>Another normal paragraph</p>
</div>

div p:not(.exclus) {
  background-color: lightgreen;
}

:empty

Description: Selects elements that contain no child nodes — neither text nor other elements.

Usage: Useful for highlighting or hiding empty elements, such as unfilled paragraphs or divs with no content.

Compatibility: Works on any HTML element that is completely empty.

Example: The empty paragraph in the container below will be highlighted.

🔧 Example: :empty

<div>
  <p></p>
  <p>Paragraph with text</p>
</div>

div p:empty {
  background-color: pink;
  border: 1px solid red;
  height: 20px;
}

State Pseudo-classes

State pseudo-classes allow selecting elements based on their current state — such as whether they are enabled, disabled, valid, or targeted. They are essential for forms and dynamic interactions.

:disabled

Description: Selects elements that are disabled and cannot be used by the user.

Usage: Useful for styling inactive fields or buttons, providing a clear visual cue.

Compatibility: Works on form elements such as <input>, <button>, <select>, etc.

Example: The disabled button below will be highlighted.

🔧 Example: :disabled

<button disabled>Disabled button</button>

button:disabled {
  background-color: gray;
  color: white;
  cursor: not-allowed;
}

:enabled

Description: Selects elements that are active and can be used by the user.

Usage: Useful for highlighting functional fields or buttons in a form.

Compatibility: Works on form elements such as <input>, <button>, <select>, etc.

Example: The active button below will be highlighted.

🔧 Example: :enabled

<button>Active button</button>

button:enabled {
  background-color: limegreen;
  color: white;
  font-weight: bold;
}

:target

Description: Selects the element that matches the fragment identifier in the URL (the part after #).

Usage: Useful for highlighting or styling an element when accessed directly via an internal link.

Compatibility: Works on any HTML element that has an id that can be referenced in the URL.

Example: When you click the link below, the targeted section will be highlighted.

Example: :target

<a href="#section">Go to section</a>
<div id="section">This is the targeted section.</div>

#section:target {
  background-color: gold;
  padding: 10px;
  border: 2px solid orange;
}

:valid

Description: Selects form elements that have valid content according to HTML5 rules.

Usage: Useful for highlighting correctly filled fields, providing positive visual feedback.

Compatibility: Works on elements such as <input>, <textarea>, <select>, etc., that have validation attributes (e.g., required, pattern, type).

Example: The valid field will be highlighted.

Live Example: :valid

<input type="email" required placeholder="Enter a valid email">

input:valid {
  border: 2px solid green;
  background-color: #eaffea;
}

:invalid

Description: Selects form elements that do not comply with HTML5 validation rules.

Usage: Useful for highlighting incorrectly filled fields, providing negative visual feedback.

Compatibility: Works on elements such as <input>, <textarea>, <select>, etc., that have validation attributes (e.g., required, pattern, type).

Example: The invalid field will be highlighted.

Live Example: :invalid

<input type="email" required placeholder="Enter an invalid email">

input:invalid {
  border: 2px solid red;
  background-color: #ffeaea;
}

:required

Description: Selects form elements that have the required attribute.

Usage: Useful for highlighting fields that must be filled before submitting the form.

Compatibility: Works on elements such as <input>, <textarea>, <select>, etc.

Example: The required field will be highlighted.

Live Example: :required

<input type="text" required placeholder="This field is required">

input:required {
  border: 2px solid orange;
  background-color: #fff4e5;
}

:optional

Description: Selects form elements that do not have the required attribute.

Usage: Useful for highlighting optional fields, giving users a visual cue that filling them is not mandatory.

Compatibility: Works on elements such as <input>, <textarea>, <select>, etc.

Example: The optional field will be highlighted.

Live Example: :optional

<input type="text" placeholder="This field is optional">

input:optional {
  border: 2px dashed gray;
  background-color: #f9f9f9;
}

Advanced Pseudo-classes

Advanced pseudo-classes extend the power of modern CSS, allowing complex, conditional, and optimized selections. They provide more precise styling control without the need for JavaScript or additional HTML changes.

:has()

Description: Selects elements that contain a certain descendant or meet an internal condition.

Usage: Useful for applying styles to a parent element based on its content. For example, you can highlight a <div> containing an <img> or an <input:checked>.

Compatibility: Works only in modern browsers (Chrome, Edge, Safari). Not supported in Firefox (at the time of writing).

Example: Highlights a <div> that contains a button.

Live Example: :has()

<div>
  <button>Click</button>
</div>
<div>
  <p>No button here</p>
</div>

div:has(button) {
  border: 2px solid blue;
  background-color: #e0f0ff;
  padding: 10px;
}

:is()

Description: Simplifies writing complex selectors by grouping multiple variants into a single block. Useful for applying the same style to multiple element types without repeating code.

Usage: Reduces redundancy and increases CSS readability, especially when you have common styles for multiple elements or combinations.

Compatibility: Supported in all modern browsers.

Example: Highlights all <h1>, <h2>, and <h3> headings with the same style.

Live Example: :is()

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section</h3>
<p>Normal paragraph</p>

h1:is(h1, h2, h3),
h2:is(h1, h2, h3),
h3:is(h1, h2, h3) {
  color: darkblue;
  font-family: sans-serif;
  border-bottom: 1px solid #ccc;
}

:where()

Description: Selects elements that match any of the specified selectors without adding specificity. Ideal for generic or base styles that should not compete with other CSS rules.

Usage: Useful for applying common styles without affecting the specificity hierarchy, unlike :is().

Compatibility: Supported in all modern browsers.

Example: Styles <h1>, <h2>, and <h3> headings without increasing specificity.

Live Example: :where()

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section</h3>
<p>Normal paragraph</p>

:where(h1, h2, h3) {
  color: darkgreen;
  font-style: italic;
  border-bottom: 1px dashed #aaa;
}

Conclusion

CSS pseudo-classes provide an elegant and efficient way to select and style elements based on their state, position, or behavior. When used correctly, they reduce the need for JavaScript, increase code clarity, and enable more dynamic and accessible interfaces. This guide covers the most relevant pseudo-classes, grouped thematically for quick and practical understanding.

🧠 Quiz – CSS Pseudo-classes

Pseudo-elements ➔