CSS Pseudo-classes

Welcome to The Coding College! In this tutorial, we’ll dive into CSS pseudo-classes—powerful tools that let you style elements based on their state, position, or user interaction. By using pseudo-classes, you can create dynamic and responsive designs with minimal effort.

What Are CSS Pseudo-classes?

A pseudo-class is a keyword added to a selector that specifies a special state of the element. For example, you can style a link when it is hovered over, or target the first child of a container.

Syntax:

selector:pseudo-class {
    property: value;
}

Example:

a:hover {
    color: red;
}

Explanation: The :hover pseudo-class applies styles to a link (<a>) when a user hovers over it.

Commonly Used CSS Pseudo-classes

Here’s a list of some of the most commonly used pseudo-classes:

  1. Interactive States:
    • :hover
    • :active
    • :focus
  2. Structural Selectors:
    • :first-child
    • :last-child
    • :nth-child()
  3. Input States:
    • :checked
    • :disabled
    • :valid / :invalid

1. Interactive State Pseudo-classes

:hover

The :hover pseudo-class is triggered when a user places their mouse over an element.

Example:

<a href="#">Hover over me!</a>
a:hover {
    text-decoration: underline;
    color: blue;
}

Output: The link becomes underlined and turns blue when hovered.

:active

The :active pseudo-class applies styles to an element while it is being clicked.

Example:

button:active {
    background-color: green;
    color: white;
}

:focus

The :focus pseudo-class styles an element when it gains focus, such as when it is selected via keyboard navigation or clicked.

Example:

<input type="text" placeholder="Focus on me!" />
input:focus {
    border-color: blue;
    outline: none;
}

2. Structural Pseudo-classes

:first-child

The :first-child pseudo-class applies styles to the first child of a parent.

Example:

<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>
li:first-child {
    font-weight: bold;
}

Output: The first <li> is bold.

:last-child

The :last-child pseudo-class applies styles to the last child of a parent.

Example:

li:last-child {
    color: red;
}

:nth-child()

The :nth-child() pseudo-class targets elements based on their position in the parent, using a formula.

Example:

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>
li:nth-child(2n) {
    color: green;
}

Output: Every even <li> is green.

:only-child

The :only-child pseudo-class applies styles to an element that is the only child of its parent.

Example:

<div>
    <p>This paragraph is the only child.</p>
</div>
p:only-child {
    text-align: center;
}

3. Input and Form Pseudo-classes

:checked

The :checked pseudo-class applies styles to checkboxes or radio buttons that are selected.

Example:

<input type="checkbox" id="check" checked />
<label for="check">I am checked!</label>
input:checked + label {
    color: green;
}

:disabled

The :disabled pseudo-class applies styles to disabled input fields.

Example:

<input type="text" disabled value="Disabled field" />
input:disabled {
    background-color: lightgray;
}

:valid / :invalid

The :valid and :invalid pseudo-classes apply styles based on the validity of form input.

Example:

<input type="email" placeholder="Enter email" required />
input:valid {
    border: 2px solid green;
}
input:invalid {
    border: 2px solid red;
}

4. Other Useful Pseudo-classes

:not()

The :not() pseudo-class excludes elements that match a specific selector.

Example:

button:not(.primary) {
    background-color: gray;
}

:nth-of-type()

The :nth-of-type() pseudo-class targets elements based on their position among siblings of the same type.

Example:

div:nth-of-type(odd) {
    background-color: lightblue;
}

:empty

The :empty pseudo-class targets elements with no child elements.

Example:

div:empty {
    border: 1px dashed gray;
}

Combining Pseudo-classes

You can combine pseudo-classes for more specific targeting.

Example:

ul li:first-child:hover {
    color: purple;
}

Output: The first list item changes color when hovered.

Practical Applications of Pseudo-classes

  • Styling navigation menus with hover and active states.
  • Highlighting form inputs based on focus or validity.
  • Targeting specific list items for custom styles.

Conclusion

CSS pseudo-classes are incredibly powerful for enhancing user interfaces and creating dynamic, interactive designs. By leveraging these selectors, you can style elements based on user behavior and structural context with precision.

For more tutorials and insights on web design, visit The Coding College.

Happy coding and mastering CSS pseudo-classes!

Leave a Comment