Abstract

A lot of us have a love-hate relationship with CSS. Sometimes you're fighting with complex grid layouts that make you want to pull your hair out, other times you're marveling at the amazing animation key-frames you've just made. To skew this towards our love for it, we've found a treasure trove of powerful pseudo-selectors and elements that often go unnoticed or underutilized.

These powerful tools enable you to target specific elements based on various states or conditions, bringing an extra layer of control and interactivity to your designs. In this blog, we'll uncover the hidden gems of CSS pseudo-selectors that you may not be using but absolutely should. From styling based on user interaction to selecting elements based on their position, we'll explore the versatility and potential of these pseudo-selectors. Get your double and single colons ready to create captivating web experiences!

Understand pseudo

Before we delve into the details, let's understand the concept of CSS selectors and pseudo-elements. Selectors allow you to target specific elements for styling, while pseudo-elements enable you to manipulate specific parts of an element's content. By harnessing the power of these advanced selectors and pseudo-elements, you can achieve remarkable design effects and customization.

Pseudo-elements are not part of the document flow. They are virtual elements that are generated by CSS, and importantly do not affect the positioning or layout of other elements.

Styling Range Inputs with :in-range and :out-of-range

CSS
input[type="range"]:in-range { 
    background-color: #aeeaff; 
} 

input[type="range"]:out-of-range {
    background-color: #ffcccc; 
}

The :in-range and :out-of-range pseudo-classes enable you to style range inputs based on their values. For example, you can change the background color of a range input when the value is within a certain range using :in-range or style it differently when the value is outside that range using :out-of-range. These pseudo-classes are invaluable for providing visual feedback and enhancing the user experience. We might pair the example above with the following HTML:

HTML
<label for="tip">Enter Tip Amount:</label>
<input type="number" id="tip" name="tip" min="0" max="100" required>

Styling the Last Element of a Type with :last-of-type

We all knew of the :last-child selector allowing us to select the last child in a parent container, however in my own experience, there had been many times where i wanted to select the last element of a certain type, and using :nth-child was not consistent, especially in a dynamic context, where the children length may be unknown.

Enter the :last-of-type pseudo-class allowing you to target the last element of a specific type within its parent container. It does exactly what it says, and I'm just sad i hadn't come across this selector earlier. Thanks CSS!

CSS
p:last-of-type {
    font-weight: bold; 
}

Styling the First Letter of Text with ::first-letter

The ::first-letter pseudo-element lets you apply styles specifically to the first letter of a block of text. You can transform the first letter to uppercase, change its font size or color, or add decorative elements. This pseudo-element is perfect for creating eye-catching headlines or drop caps that grab the reader's attention. It's even used on this very blog! Scroll back to the top to have a look. Our selector code looks like this:

CSS
#blog-body > p:first-of-type::first-letter {
    font-weight: bold;
    font-size: 25px;
    font-family: Montserrat;
}

Styling the First Line of Text with ::first-line

Similar to ::first-letter, the ::first-line pseudo-element enables you to apply styles specifically to the first line of a block of text. You can change the font, adjust the line height, or add text effects. This pseudo-element allows you to create visually appealing introductory paragraphs or highlight important content within the first line.

CSS
p::first-line {
    font-weight: bold; text-transform: uppercase;
}

Styling Text Selection with ::selection

This last one i'm going to show here is situationally useful, and i urge you to use it responsibly! This selector allows us to determine what happens, style wise, when a user highlights and selects text or images on our website. This selector is also used on this website! However, it is only used on the dark mode, and responsibily as well! We must make sure that the color we use for selected text, follows accesibility guidelines setup by WCAG. See example below:

CSS
p::selection {
    color: red;
    background-color: yellow;
}

Conclusion

There are many more selectors that i've not covered in this article, however i strongly urge you to open a new tab and checkout the MDN docs. They are an invaluable resource for us developers, and spending a little bit of time scrolling and familiarising yourself with what resources are available will go a long way!

You can find the MDN docs here.

Keep psuedo-selecting!