CSS: Tricks for targeting elements with CSS

Introduction

Attribute selectors in CSS are very useful for targeting specific elements based on their attributes. In this blog post, we'll explore a few essential attribute selectors worth knowing about and discuss how they work.

Does the element have a href attribute

Consider this element:

<a href="https://umaar.com/dev-tips">Dev Tips</a>

This selector below matches the element since the element has an href attribute:

a[href] {
}

Does the element have this specified href attribute value

The selector below matches too, as the element has this exact href attribute value:

a[href="https://umaar.com/dev-tips"]
{
}

Does the element include this piece of text anywhere in the href attribute value

The href attribute value does include the string .com, so the selector below is a matching selector:

a[href*=".com"] {
}

Does the element's href attribute value start with the specified string

The href value does start with the string https:, therefore this selector below matches:

a[href^="https:"] {
}

Does the element's href attribute value end with the specified string

The href value ends with the string /dev-tips, so this selector below also matches:

a[href$="/dev-tips"] {
}

Use the i operator for a case-insensitive match

The i operator allows for case-insensitive attribute value matching. Here's how it works:

We're trying to match this element:

<a href="https://umaar.com" title="Home">Home</a>

⚠️ This selector does not match because of case sensitivity. Notice the element uses the string Home but the CSS selector specifies home - in lowercase:

a[title="home"] {
}

✅️ This selector below will match because the i operator treats it as case insensitive:

a[title="home" i] {
}

Matching elements with attribute values separated by hyphens

You can use the |= operator to target elements with attribute values that are separated by hyphens. This is especially useful for targeting elements based on language or other hyphen-separated values.

For instance, consider the following element:

<div lang="en-US">Hello, world!</div>

To target this element, you can use the following selector:

div[lang|="en"] {
    /* Styles for elements with lang attribute starting with "en" followed by a hyphen */
}

This selector will match any div element with a lang attribute value that starts with "en-" (e.g., "en-US", "en-GB").

Matching elements with attribute values separated by whitespace

The ~= operator allows you to target elements with attribute values that are separated by whitespace. This is useful for selecting elements with multiple values in a single attribute, such as the class attribute.

Consider this element:

<div class="box highlighted">Content</div>

To target elements with the highlighted class, you can use the following selector:

div[class~="highlighted"] {
    /* Styles for elements with the "highlighted" class */
}

This selector will match any div element with a class attribute value that contains the word "highlighted" separated by whitespace.

Conclusion

CSS attribute selectors offer a powerful way to target elements based on their attributes.