综合开发

CSS Fundamentals: Attribute Selectors

微信扫一扫,分享到朋友圈

CSS Fundamentals: Attribute Selectors

In this article, we’ll be learning all about attribute selectors. If you remember from HTML, elements can have attributes that give extra details.

An a
tag with an href
attribute:

<a href="https://easeout.co">This is a link</a>

We use CSS attribute selectors to target these elements with their specific attributes. For example:

a[href="https://easeout.co"] {
color: #FFFF00;
}

Here we have an exact match
selector, it will only select links with the exact
href
attribute value of “https://easeout.co”.

So let’s learn how to use these very useful selectors!

Are you ready to take your CSS skills to the next level?
Get started now with my new course at Educative.io

SASS for CSS: Advanced Frontend Development

. Get up-to-date on all the features you need to advance your front end development skills!

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(s), usually in quotes.

It’s what goes between the attribute name and equals sign, that determines the selector type!

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.

[attr]
The attribute itself.

Matches all elements with an attribute name of attr.
Such as a[title]
.

[attr=”value”]
The attribute has this exact value.

Matches all elements with an attribute name of attr
whose value is exactly
value
— the string inside the quotes. Such as a[href="https://easeout.co"]
.

[attr~=”value”]
The attribute has this value in a space-separated list.

Matches elements with an attribute name of attr
whose value is exactly value
, or elements with an attr
attribute containing one or more values, at least one of which matches value
.

In a list of multiple values the separate values are whitespace-separated. For example, img[alt~="dough"]
will select images with the alt text “making dough
” and “ dough
types”, but not “ dough
nuts”.

[attr|=”value”]
The first attribute value in a dash-separated list.

Matches all elements with an attribute name of attr
whose value can be exactly value
or can begin with value
immediately followed by a hyphen. For example, li[attr-years|="1990"]
will select list items with a attr-years
value of “1990-2000”, but not the list item with a attr-years
value of “1900-1990”.

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!

[attr*=”value”]
The attribute value contains this value.

Matches all elements with an attribute name of attr
whose value contains at least one occurrence of the substring value
anywhere within the string. For example, img[alt*="dough"]
will select images containing the alt text “dough”. So “making dough
”, “ dough
types” and “ dough
nuts” would all be selected.

[attr^=”value”]
The attribute starts with this value.

Matches any elements with an attribute name of attr
whose value has the substring value
at the start of it. eg li[class^=”message-”]
.

[attr$=”value”]
The attribute ends with this value.

Matches any elements with an attribute name of attr
whose value has the substring value
at the end of it. For example, a[href$="pdf"]
selects every link that ends with .pdf.

Case sensitivity

All the checks so far have been case sensitive
.

If you add an i
just before the closing bracket, the check will be case insensitive. It’s supported by most browsers but not all, check https://caniuse.com/#feat=css-case-insensitive
.

Combining attribute selectors

Attribute selectors can also be combined with other selectors, such as tag, class, or ID.

div[attr="value"] {
/* style rules */
}
.item[attr="value"] {
/* style rules */
}
#header[attr="value"] {
/* style rules */
}

And multiple attribute selectors can be combined:

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’ve covered the fundamentals of attribute selectors. Including presence and value selectors, substring matching selectors, adding case-sensitivity and combining selectors.

I hope you found this article useful. You can follow me
on Medium. I’m also on Twitter
. Feel free to leave any questions in the comments below. I’ll be glad to help out!

Introducing Spin

上一篇

Groovy Calamari - Issue 176 - 26th Mar 2020

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

CSS Fundamentals: Attribute Selectors

长按储存图像,分享给朋友