CSS Pseudo-classes Guide with Examples

CSS selectors are patterns used to select and style HTML elements. They define which elements the CSS rules apply to and allow you to control the presentation of your web pages precisely.

Types of CSS Selectors

Universal Selector (*): Selects all elements on the page.
```
* {
  margin: 0;
  padding: 0;
}
```
Try It Now
This rule resets the margin and padding for all elements.
Type Selector: Targets all elements of a specified type (tag).
```
p {
  color: blue;
}
```
Try It Now
This rule applies a blue color to all <p> elements.
Class Selector (.classname): Targets elements with a specific class attribute.
```
.highlight {
  background-color: yellow;
}
```
Try It Now
This rule applies a yellow background to elements with the class highlight.
ID Selector (#idname): Targets an element with a specific ID attribute.
```
#header {
  font-size: 24px;
}
```
Try It Now
This rule applies a font size of 24 pixels to the element with the ID header.
Group Selector: Applies the same styles to multiple elements.
```
h1, h2, h3 {
  color: green;
}
```
Try It Now
This rule applies a green color to all <h1>, <h2>, and <h3> elements.
Descendant Selector: Targets elements inside another element (nested elements).
```
div p {
  color: red;
}
```
Try It Now
This rule applies a red color to all <p> elements inside a <div>
Child Selector (> ): Targets direct children of an element.
```
ul > li {
  list-style-type: square;
}
```
Try It Now
This rule applies a square list style to <li> elements that are direct children of a <ul>.
Adjacent Sibling Selector (+): Targets an element immediately following another element.
```
h1 + p {
  font-style: italic;
}
```
Try It Now
This rule italicizes the first <p> element immediately following an <h1>
General Sibling Selector (~): Targets all siblings of an element.
```
h1 ~ p {
  color: grey;
}
```
Try It Now
This rule applies a grey color to all <p> elements that are siblings of an <h1>.
Attribute Selector: Targets elements with specific attributes.
```
input[type="text"] {
  border: 1px solid black;
}
```
Try It Now
This rule applies a border to all <input> elements with the type attribute set to text.

Pseudo-Classes and Pseudo-Elements

Pseudo-Classes: Define a special state of an element.
- :hover: Applies styles when the user hovers over an element.
```
a:hover {
  color: red;
}
```
  Try It Now
Pseudo-Elements: Target parts of an element.
- ::before and ::after: Insert content before or after an element’s content.
```
p::before {
  content: "Note: ";
  font-weight: bold;
}
```
  Try It Now

Specificity and Importance

Specificity: Determines which rule is applied when multiple rules target the same element. Inline styles have the highest specificity, followed by IDs, classes, and type selectors.
!important: Overrides all other declarations, regardless of specificity.
```
p {
  color: blue !important;
}
```
Try It Now

Comprehensive example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Selectors Example</title>
  <style>
    /* Universal Selector */
    * {
      font-family: Arial, sans-serif;
    }

    /* Type Selector */
    p {
      color: blue;
    }

    /* Class Selector */
    .highlight {
      background-color: yellow;
    }

    /* ID Selector */
    #header {
      font-size: 24px;
      text-align: center;
    }

    /* Group Selector */
    h1, h2, h3 {
      color: green;
    }

    /* Descendant Selector */
    div p {
      color: red;
    }

    /* Child Selector */
    ul > li {
      list-style-type: square;
    }

    /* Adjacent Sibling Selector */
    h1 + p {
      font-style: italic;
    }

    /* General Sibling Selector */
    h1 ~ p {
      color: grey;
    }

    /* Attribute Selector */
    input[type="text"] {
      border: 1px solid black;
      padding: 5px;
    }

    /* Pseudo-Class Selector */
    a:hover {
      color: red;
    }

    /* Pseudo-Element Selector */
    p::before {
      content: "Note: ";
      font-weight: bold;
    }
  </style>
</head>
<body>

  <!-- ID Selector -->
  <div id="header">Welcome to CSS Selectors</div>

  <!-- Type Selector -->
  <p>This paragraph is styled using a type selector.</p>

  <!-- Class Selector -->
  <p class="highlight">This paragraph is highlighted using a class selector.</p>

  <!-- Group Selector -->
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>

  <!-- Descendant Selector -->
  <div>
    <p>This paragraph is inside a div, styled using a descendant selector.</p>
  </div>

  <!-- Child Selector -->
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ul>

  <!-- Adjacent Sibling Selector -->
  <h1>Adjacent Sibling Example</h1>
  <p>This paragraph is styled using an adjacent sibling selector.</p>

  <!-- General Sibling Selector -->
  <p>This is a general sibling paragraph.</p>
  <p>Another general sibling paragraph.</p>

  <!-- Attribute Selector -->
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </form>

  <!-- Pseudo-Class Selector -->
  <a href="#">Hover over this link</a>

  <!-- Pseudo-Element Selector -->
  <p>This paragraph uses a pseudo-element to prepend text.</p>

</body>
</html>

Try It Now

Explanation of the Example:

Universal Selector applies a font family to all elements.
Type Selector styles all <p> elements with blue text.
Class Selector adds a yellow background to elements with the class highlight.
ID Selector applies styles specifically to the element with the ID header.
Group Selector styles all <h1>, <h2>, and <h3> elements with green text.
Descendant Selector targets <p> elements inside a <div> with red text.
Child Selector changes the bullet style for direct <li> children of a <ul>.
Adjacent Sibling Selector italicizes the first <p> after an <h1>.
General Sibling Selector makes all sibling <p> elements of <h1> grey.
Attribute Selector styles the <input> element with type="text".
Pseudo-Class Selector changes the link color on hover.
Pseudo-Element Selector adds “Note: ” before every <p> element.

Summary

CSS selectors are a fundamental part of CSS, allowing you to target specific elements and apply styles. By mastering different types of selectors, you can create flexible and efficient stylesheets that control the appearance of your web pages.