Attribute Selectors
From targeting elements based on their attributes to styling based on partial values, attribute selectors offer flexibility and control. Elevate your CSS skills as we dive into the nitty-gritty of attribute selectors.
nanadwumor
- CSS 2 introduces attribute selectors for styling elements based on attributes and their values.
- Simple selectors style elements with specific attributes; multiple attributes can also be used.
- Exact value selectors apply styles based on specific attribute values.
- Partial-match selectors include pipe-equals and tilde-equals, matching values with hyphens or space-separated words.
RECOMMENDED ARTICLES
Combining a class and pseudo-class
Can you combine class and pseudo-class to style elements? Learn how to precisely target and style elements with advanced pseudo-classes in CSS! Combining classes and pseudo-classes styles elements based on both their type and class, such as...
Types of Pseudo-classes
Know the types of Pseudo-classes, master CSS styling with pseudo-classes for precise element targeting and design control! Structural pseudo-classes style elements based on their position or hierarchy in the HTML document, like...
How to use Pseudo-classes in CSS
Discover how pseudo-classes in CSS enhance user interaction and styling! Pseudo-classes apply styles based on user interaction, element position, or relationships between elements. Normal classes are applied directly as attributes, whereas...
In CSS 2, attribute selectors were introduced. Attribute Selectors can be used to select elements based on their attributes and value of the attributes.
There are four basic types of attribute Selectors.
These are simple attribute selectors, exact attribute value selectors, partial-match attribute value selectors, and leading-value attribute selectors.
Simple Attribute Selectors
It is possible to style HTML elements that have specific attributes. For example, in the code below we style the <a> element which has an attribute called target to have a red background. This means
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> a[target] { background-color: red; } </style> </head> <body> <h2>Simple Attribute Selector</h2> <p>The links that have a target attribute display a red background:</p> <a href="https://www.villagecoder.com">VillageCoder</a> <a href="https://www.factalive.com" target="_blank" rel="noopener">factalive</a> <a href="https://www.mystudentclass.com" target="_top" rel="noopener">MyStudentClass</a> <a target="_top" rel="noopener">Wikipedia</a> </body> </html> |
Output
More than one attribute can also be used to select an element to style.
For example, we can select the <a> element that has both href and target attribute using the style:
|
1 |
a[href][target] {text-decoration : line-through;} |
Output
Selecting an element using attribute and value
We can also select an element for styling by using the attribute and its value.
For example, let’s say you want to boldface any hyperlink that points to a certain document on the web server. This would look something like the following:
|
1 |
a[href="https://www.villagecoder.com"] {text-decoration : line-through;} |
Output
Combining more than one attribute and values
Just as we can combine more than one attributes, we can also combine more than one attributes and values. For example,
|
1 |
a[href="https://www.factalive.com"] [target="_blank"] {font-style : italic;} |
Output
The above will style the <a> element with the exact attributes
|
1 |
[href="https://www.factalive.com"] and [target="_blank"] |
Note that ID selectors and attribute selectors that use the id attribute are not
exactly the same. That is, there exists difference between div#main-section and div[id=”main-section”].
Selection using Partial Attribute Values
You don’t have to know the exact attribute and value of an element before you use it to style the element. You can select element by knowing just some of the characters in the attribute or value.
(1) The Pipe-equals selector
|
1 |
[attribute |= 'value' ] |
This attribute selector selects an element which has the specified attribute and whose value is exactly the specified value, or the specified value followed by hyphen (-). For example,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> [class|="greeting"] { color : red; } </style> </head> <body> <h2>CSS [attribute|="value"] Selector</h2> <p class="greeting-morning">Good Morning</p> <p class="greeting-afternoon">Good Afternoon</p> <p class="greeting-evening">Good Evening </p> <p class="greetingAnyday">Greetings Everyone</p> </body> </html> |
Output
The first three <p> elements will appear red. The last <p> element has “greeting” characters in its value but it won’t be affected because there’s no hyphen between the “greeting” and “Anyday”.
This attribute selector is commonly used to match language values.
|
1 2 3 |
<style> <!--This is HTML comment within a style tag--> </style> |
(2) The tilde-equals Selector
|
1 |
[attribute ~= 'value' ] |
This attribute selector selects an element which has the specified attribute and a specified word, or in space-separated value. For example,
|
1 |
Output
We observe that only the first and third <img> elements are targeted by the style because in the first, “language” is separated from preceding word by space, in the third, it’s only “language” which is not connected to any other word. In the second <img>, the word “language” is connected to “python” by hyphen so it’s not affected.
The example above will match elements with title=~”object-oriented programming language”, title~=”language of choice”, but won’t match title ~=”best_language”.
Recent Comments