Skip to main content

Pseudo-classes in CSS (Live Playground)

Pseudo-classes in CSS allow you to target and style HTML elements based on their states, such as hover or focus, or based on their structural relationship to other elements. In this tutorial, you will learn how to use pseudo-classes effectively, along with sample code and simple explanations.

State-based pseudo-classes​

State-based pseudo-classes allow you to style elements based on their current state, such as when a user hovers over an element or when an input element has focus.

Example:

CSS
/* Change the background color of an anchor element on hover */
a:hover {
  background-color: lightblue;
}

/* Style an input element when it has focus */
input:focus {
  border-color: darkblue;
  outline: none;
}
HTML
<a href="#">Hover over me!</a> <input type="text" placeholder="Click to focus on me" />

In this example, the a:hover and input:focus pseudo-classes target anchor and input elements when they are in the hover and focus states, respectively.

Live Playground, Try it Yourself

Structural pseudo-classes​

Structural pseudo-classes enable you to style elements based on their position or relationship within the HTML structure.

Example:

CSS
/* Style the first child of a list */
ul li:first-child {
  font-weight: bold;
}

/* Style the last child of a list */
ul li:last-child {
  font-style: italic;
}

/* Style every even child of a list */
ul li:nth-child(even) {
  background-color: lightgray;
}
HTML
<ul>
  <li>First item (bold)</li>
  <li>Second item (gray background)</li>
  <li>Third item (italic)</li>
  <li>Fourth item (gray background)</li>
</ul>

In this example, the ul li:first-child, ul li:last-child, and ul li:nth-child(even) pseudo-classes target list items based on their structural position within the list.

Live Playground, Try it Yourself

Other pseudo-classes​

CSS provides many other pseudo-classes to help you target elements based on various criteria. Some of these include:

  • :not(): Targets elements that do not match the given selector
  • :checked: Targets radio buttons or checkboxes that are currently checked
  • :disabled: Targets form elements that are disabled

Example:

CSS
/* Style all paragraphs except those with the class "no-border" */
p:not(.no-border) {
  border-bottom: 1px solid black;
}

/* Style checked checkboxes */
input[type='checkbox']:checked {
  outline: 2px solid red;
}

/* Style disabled buttons */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
HTML
<p>This paragraph has a border.</p>
<p class="no-border">This paragraph has no border.</p>
<input type="checkbox" />
<button>Click me!</button>
<button disabled>Disabled button</button>
Live Playground, Try it Yourself

Conclusion​

In this tutorial, you learned how to use pseudo-classes in CSS to target and style HTML elements based on their states or structural relationships. With this knowledge, you can create more dynamic and responsive styles for your web page and enhance the user experience. By combining various pseudo-classes, you can achieve a greater level of control and specificity in your designs.