CSS is an essential part of web development. Regardless of which programming language you use, the chances are you know some CSS, too. In this article we're going to help you go beyond the basics and explore the power of pseudo elements and pseudo selectors, and explain how to use them in real-world contexts. So, without further ado, let's get into it.

Grouped States with :is()

Using :is() makes managing grouped states more efficient. Instead of repeating selectors for multiple states, you can consolidate them into one concise rule. This improves readability and maintainability in your CSS by allowing you to easily group elements.

Styling Based on Checked State (:checked)

The :checked pseudo-class is perfect for styling form elements like checkboxes and radio buttons dynamically, and combined with other selectors (like the + selector, see below) you can style peer elements based on the checked state of the input itself.

Sibling Interaction (:hover +)

Target sibling elements dynamically with the + combinator and :hover pseudo-class. This approach is ideal for creating hover effects that change the style or behaviour of adjacent elements.

Style Elements Based on Contents Using :has()

The :has() pseudo-class allows you to style elements based on the presence of specific child elements. This provides a level of parent-to-child styling flexibility previously unavailable in CSS.

Target Empty Elements with :empty

The :empty pseudo-class is useful for identifying and styling elements without child content, such as adding placeholder messages or default states for containers. In our example, we combine it with the ::before pseudo-selector to add placeholder content to any empty elements.

Insert Content Before the Element's Actual Content with ::before

The ::before pseudo-element is a creative way to add decorative content or icons before the actual content of an element, without modifying the HTML structure.

Style First Letter and First Line with ::first-letter and ::first-line

Use ::first-letter and ::first-line to add typographic flair to text elements. These pseudo-elements are great for creating drop caps or unique first-line styles in paragraphs.

Conclusion

The great thing about CSS is that new features are always being introduced, to keep up with the needs of developers on the modern web. This means there's plenty more to discover, and we'll be sure to keep you up to date on some of the most fun - and most powerful - features CSS has to offer.

Of course, you can view the CodePen collection here to see all of the code featured in this article.