CSS pseudo-classes are a powerful tool for web developers. They make it possible to apply styles based on specific conditions, enhancing the aesthetic and even the interactivity of websites and in this post, I'm delving into what CSS pseudo-classes are and providing some code examples that demonstrate their use.

I've been leaning on them a lot more in layouts

Let's start by understanding some commonly used CSS pseudo-classes:

1. :first-child

The :first-child pseudo-class targets the first child element within a parent element.

This means the first paragraph will be rendered in blue.

p:first-child {
  color: blue;
}

2. :last-child

On the flip side, we have the :last-child pseudo-class, which styles the last child element within a parent element.

Here, the last paragraph within any parent element will be rendered in green.

p:first-child {
  color: blue;
}

3. :nth-child(n)

The :nth-child(n) pseudo-class targets the nth child element within a parent element.

This one can be a little tricky as when using it you might instinctively think its the specified instance of the specified element. I've found however that when working with grid elements the div or class it is applied to it is the specified child whatever that child tag that may be.

This example demonstrates that the second paragraph within any parent element will rendered in purple.

p:nth-child(2) {
  color: purple;
}

But in a real-world example, it's often not that simple.

Exploring New Functional Pseudo-class Selectors: :is() and :where()

Apart from these standard pseudo-classes, there are also functional pseudo-class selectors like :is() and :where(). These selectors make your CSS code more concise and readable.

:is(.class1, .class2) {
  color: yellow;
}

In this above, all elements with either .class1 or .class2 will be rendered yellow.

The Power of :before and :after

two interesting and often misunderstood pseudo-elements: :before and :after. While they aren't technically pseudo-classes, they often get lumped together because they're used in similar ways¹. Let's dive in and uncover their potential.

Understanding the Power of :before and :after

The :before and :after pseudo-elements allow us to insert content into a page from CSS without modifying the HTML. This can be useful for adding stylistic enhancements that don't necessarily need to be part of the document's content.

1. :before

The :before pseudo-element inserts content before the selected element's content.

p:before {
  content: "Read this - ";
}

In this code, the text "Read this - " will be inserted before the content of every paragraph.

2. :after

Conversely, the :after pseudo-element inserts content after the selected element's content.

p:after {
  content: " - End of line";
}

Here, the phrase " - End of line" will be added after the content of every paragraph.

Creative Uses of :before and :after

It's important to not that even if content declaration is to be left blank it still must be included in the declarations.

Also remember that they display inline by deafualt

Both :before and :after pseudo-elements can be utilized in creative ways to add unique design elements to your website. For instance, you could use these pseudo-elements to create shapes, such as circles, rectangles, or more complex figures.

.square:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: red;
}

In this example, a red square will appear before any element with the class .square.

The :before and :after pseudo-elements provide a powerful way to enhance your website design without altering your HTML. By understanding how to use these tools effectively, you can add unique and creative enhancements to your web pages.

Remember, I'm only scratching the surface of what's possible with CSS pseudo-classes and pseudo-elements. There's a whole world of possibilities out there to explore!

Kerry Owston Blog