When building this WordPress site, I needed a way to select a class based on a specific substring. This would allow me change the color of a few div elements. I stumbled upon this CSS functionality that allowed me to do that using the “*” operator. Today, I’d like to dive a little deeper into that, share a few other helpful operators, and talk about the :empty pseudo-class.
1. Attribute Selectors
Attribute selectors enable you to target elements based on the presence or value of their attributes. This is particularly useful for applying styles to elements that meet specific criteria without requiring additional classes or IDs.
Example 1: Targeting Links Based on URL Patterns
Attribute selectors can target links (anchor tags) based on the patterns in their href attribute. Here are three examples demonstrating how to use attribute selectors to style links based on their URLs:
/* Targets links that start with "https" */
a[href^="https"] {
color: green;
}
/* Targets links that end with ".pdf" */
a[href$=".pdf"] {
color: red;
}
/* Targets links that contain "example" */
a[href*="example"] {
text-decoration: underline;
}
Explanation:
a[href^="https"]: The^=operator targets elements whose attribute value starts with the specified substring. In this case, it styles all links (<a>) that start with “https” by changing their text color to green. This is particularly useful for highlighting secure links.a[href$=".pdf"]: The$=operator targets elements whose attribute value ends with the specified substring. This selector styles all links ending with “.pdf” by setting their text color to red, making it easy to distinguish downloadable PDF documents.a[href*="example"]: The*=operator targets elements whose attribute value contains the specified substring anywhere within it. This selector adds an underline to any link that contains “example” in its URL, providing a visual cue for specific types of links.
These attribute selectors allow you to apply targeted styles to elements based on their attributes’ values, enhancing the semantic richness and usability of your web pages.
2. The :empty Pseudo-Class
The :empty pseudo-class selects elements that have no children, including text nodes. This can be useful for identifying and styling elements that are empty, often for debugging purposes or to provide visual cues in content management systems.
Example: Styling Empty <div> Elements
/* Style empty <div> elements */
div:empty {
background-color: #f9f9f9;
border: 1px dashed #ccc;
}
Explanation:
div:empty: This selector targets all<div>elements that do not contain any child elements or text nodes. The applied styles set a light grey background color (#f9f9f9) and a dashed border (1px dashed #ccc) to these empty<div>elements.
Using the :empty pseudo-class can be particularly helpful in situations where you want to provide visual feedback for empty containers, which might otherwise be difficult to identify. It can also be used to ensure that empty elements do not affect the layout or design of a webpage unintentionally.
Conclusion
Attribute selectors enable you to target elements based on specific attribute values, while the :empty pseudo-class helps you identify and style elements that lack content. By adding these techniques to your CSS toolkit, you will have handy solutions for situations where you need to achieve specific styles using only CSS.