In our last post, we went over CSS combinators which includes selecting your CSS style by descendant, child, adjacent and general sibling selectors. In this post we are going to discuss CSS Attribute selectors.
This is the third part of a five-parts article. You can find first four parts from the following link:
Part -1 Simple Selectors
Part -2 Understanding CSS Combinators
Part -3 CSS Pseudo class Selectors
Part -4 CSS Pseudo element selectors
Before we gonna understand the concept of CSS Attribute selectors, let’s first discuss what is an attribute in HTML.
Example of HTML attributes:
Now you got some basic understanding what are attributes in HTML. Then, next puzzle which we are going to solve, what is CSS Attribute selectors and why do we need them?
What are CSS Attribute selector?
Attribute selectors are a special kind of selector that will match elements based on their attributes and attribute values.
You can create an attribute selector by putting the attribute—optionally with a value—in a pair of square brackets [ ]. You can also place an element type selector before it.
Now let’s dive into the different kinds of attribute selector which we can use.
Types of Attribute selectors
There are many different types of attribute selectors, which are classified as either presence and value selectors or substring matching selectors.
The syntax for each selector starts with the attribute name and ends with an equals sign followed by the attribute value, usually in quotes.
Presence and value selectors
These selectors will select an element based on the presence of an attribute alone (e.g. href), or on various different matches against the value of the attribute.
Summary:
[attr] – The attribute itself.
[attr=”value”] – The attribute has this exact value.
[attr~=”value”] The attribute has this value in a space-separated list.
[attr|=”value”] The first attribute value in a dash-separated list.
Substring matching selectors
Substring selectors allow for more advanced matching inside the value of your attribute. For example, if you had classes of message-warning and message-error and wanted to match everything that started with the string “message-“, you could use [class^="message-"] to select them both!
Summary:
[attr*=”value”] – The attribute value contains this value.
[attr^=”value”] – The attribute starts with this value.
[attr$=”value”] – The attribute ends with this value.
CSS [attribute] selector
This is the simplest form of an attribute selector that applies the style rules to an element if a given attribute exists.
CSS [attribute] selector example
For example, we can style all the elements that have a title attribute by using the following style rules:
<h1 title="heading">Attribute Selector</h1> <p title="paragraph">The color of this paragraph will be red.</p>
[title] {
color: blue;
}
The selector [title] in the above example matches all elements that has a title attribute.
You can also restrict this selection to a particular HTML element by placing the attribute selector after an element type selector, like this:
<body>
<p>
The <abbr title="Hyper Text Markup Language">HTML</abbr> is the publishing
language of the World Wide Web.
</p>
</body>abbr[title] {
color: red;
}
The selector abbr[title] matches only abbr elements that has a title attribute.
Above two examples were targeting attribute type only, but we can also target attribute value too.
CSS [attribute=”value”] selector
Here you can use the = operator to make an attribute selector matches any element whose attribute value is exactly equal to the given value.
CSS [attribute=”value”] selector example
<body>
<form>
<input type="text" />
<input type="submit" value="Submit" />
</form>
</body>input[type='text'] {
border: 1px solid red;
}
input[type='submit'] {
border: 1px solid green;
}
The selector in the above example matches all input element that has a type attribute with a value equal to submit.
CSS [attribute~=”value”] selector
You can use the ~= operator to make an attribute selector matches any element whose attribute value is a list of space-separated values (like class="alert warning") , one of which is exactly equal to the specified value.
CSS [attribute~=”value”] selector example
<body>
<p class="warning">The style will apply to this paragraph.</p>
<p class="warning highlight">
The style will also apply to this paragraph.
</p>
<p class="highlight">The style will not apply to this paragraph.</p>
</body>[class~='warning'] {
color: #fff;
background: red;
}
This selector matches any HTML element with a class attribute that contains space-separated values, one of which is warning. For example, it matches the elements having the class values warning, alert warning etc.
CSS [attribute|=”value”] selector
You can use the |= operator to make an attribute selector matches any element whose attribute has a hyphen-separated list of values beginning with the specified value.
CSS [attribute|=”value”] selector example
<body>
<p lang="en">The style will apply to this paragraph.</p>
<p lang="en-us">The style will also apply to this paragraph.</p>
<p lang="us">The style will not apply to this paragraph.</p>
</body>p[lang|='en'] {
color: #fff;
background: blue;
}
The selector in the above example matches all elements that has an lang attribute containing a value start with en, whether or not that value is followed by a hyphen and more characters.
In other words, it matches the elements with lang attribute that has the values en, en-US, en-GB, and so on but not US-en, GB-en.
CSS [attribute^=”value”] selector
The [attribute^=value] has a caret (^) operator, which means “to start with”. This will target elements on the page where the given attribute starts with a specific value.
CSS [attribute^=”value”] selector example
For example you may be able to select all links on the page that are external vs internal, and make the background color light blue.
<body>
<a href="http://www.webdesignernews.com/">Web Design News (External Link)</a>
<a href="/design/web.html">Design Category (Internal Link)</a>
</body>a[href^="http://"]
{
background-color: lightblue;
}
CSS [attribute$=”value”] selector
This attribute selector makes use of the dollar sign($) which is the opposite of the prior example. While the caret(^) means to start with, the $ symbol means “ends with”.
CSS [attribute$=”value”] selector example
A use case for this might be to target links on the page which link to a PDF document.
<body>
<a href="https://uxdesign.cc/">UX News</a>
<a href="/design/great.pdf">A Great PDF To Read</a>
</body>a[href$='.pdf'] {
background-color: lightblue;
}
CSS [attribute*=”value”] selector
The final attribute is a substring selector and it uses asterisk (*) operator, which stands for “contains”. You can use [attribute*="value"] selector which matches all elements whose attribute value contains a specified value.
CSS [attribute*=”value”] selector example
<body>
<p class="warning">The style will apply to this paragraph.</p>
<p class="alert warning">The style will also apply to this paragraph.</p>
<p class="alert-warning">The style will also apply to this paragraph.</p>
<p class="alert_warning">The style will also apply to this paragraph.</p>
<p class="highlight">The style will not apply to this paragraph.</p>
</body>[class*='warning'] {
color: #fff;
background: red;
}
This selector in the example above matches all HTML elements with a class attribute that values contains warning. For example, it matches the elements having class values warning, alert warning, alert-warning or alert_warning etc.
Combining attribute selectors
Attribute selectors can also be combined with other selectors, such as tag, class, or ID. Here is an example:
div[attr="value"] {
/* style rules */
}
.item[attr="value"] {
/* style rules */
}
#header[attr="value"] {
/* style rules */
}And multiple attribute selectors can be combined too:
img[alt~="city"][src*="europe"] {
/* style rules here */
}Here we select all images with alt text including the word “city” as the only value or a value in a space separated list, and a src value that includes the value “europe”.
Conclusion
And that’s it! We have covered the fundamentals of attribute selectors. Including presence and value selectors, substring matching selectors.
We hope you found this article useful. In our next post we are going to cover Pseudo-class selectors. For the time being, feel free to leave any questions in the comments below. we will be glad to help out!
Add comment