CSS Pseudo-classes

CSS pseudo-classes are powerful tools that allow you to apply styles to elements based on their state or position in the document tree. They are used to define the special states of an element without needing to add additional classes or IDs to your HTML. In this guide, we will explore various pseudo-classes and demonstrate how to use them to enhance your web design.

What are CSS Pseudo-classes?

A pseudo-class is a keyword added to selectors that specifies a special state of the selected elements. Pseudo-classes are used to style elements when they are in a particular state, such as when a user hovers over them, or they are the first child of their parent.

:hover:

The :hover pseudo-class applies styles to an element when a user hovers over it with a pointing device.

CSS Example:

button:hover {
    background-color: blue;
    color: white;
}

HTML Example:

<button>Hover me!</button>

When the user hovers over the button, its background color changes to blue, and the text color changes to white.

:active:

The :active pseudo-class applies styles to an element when it is being activated by the user, such as when it’s clicked.

CSS Example:

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

HTML Example:

<button>Click me!</button>

When the user clicks the button, its background color changes to red, and the text color changes to white.

:focus:

The :focus pseudo-class applies styles to an element when it receives focus, such as when a user clicks on an input field or navigates to it using the keyboard.

CSS Example:

input:focus {
    border: 2px solid green;
}

HTML Example:

<input type="text" placeholder="Focus on me!">

When the input field is focused, its border changes to a solid green line.

:first-child & :last-child:

The :first-child pseudo-class applies styles to an element that is the first child of its parent, while the :last-child pseudo-class applies styles to an element that is the last child of its parent.

CSS Example:

ul li:first-child {
    font-weight: bold;
}

ul li:last-child {
    font-style: italic;
}

HTML Example:

<ul>
    <li>First item (bold)</li>
    <li>Second item</li>
    <li>Last item (italic)</li>
</ul>

The first list item will be bold, and the last list item will be italicized.

:nth-child():

The :nth-child() pseudo-class applies styles to elements based on their position in a parent element. It takes a pattern argument such as a number, odd, or even.

CSS Example:

ul li:nth-child(odd) {
    background-color: lightgrey;
}

HTML Example:

<ul>
    <li>Item 1 (light grey)</li>
    <li>Item 2</li>
    <li>Item 3 (light grey)</li>
    <li>Item 4</li>
</ul>

Every odd-numbered list item will have a light grey background.

:nth-of-type():

The :nth-of-type() pseudo-class is similar to :nth-child(), but it applies styles based on the position of an element among siblings of the same type.

CSS Example:

p:nth-of-type(2) {
    color: red;
}

HTML Example:

<p>Paragraph 1</p>
<p>Paragraph 2 (red)</p>
<p>Paragraph 3</p>

The second paragraph will have red text.

:not():

The :not() pseudo-class applies styles to elements that do not match the specified selector.

CSS Example:

p:not(.special) {
    color: grey;
}

HTML Example:

<p class="special">This paragraph is not grey.</p>
<p>This paragraph is grey.</p>

Paragraphs that do not have the class special will have grey text.

Conclusion:

CSS pseudo-classes provide a way to target elements based on their dynamic states or positions, enhancing the interactivity and usability of your web pages. By mastering pseudo-classes like :hover, :active, :focus, :first-child, :last-child, :nth-child(), :nth-of-type(), and :not(), you can create sophisticated styles that respond to user interactions and improve the user experience. Experiment with these pseudo-classes to make your web designs more dynamic and engaging.