Hello Sunil
Understanding CSS Attribute Selectors

CSS Attribute Selectors – A Quick Intro

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:

CSS Attribute Selectors - 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;
}
CSS Attribute Selectors - attribute selector example-1

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;
}
CSS Attribute Selectors - attribute selector example-2

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;
}
CSS Attribute Selectors - attribute selector example-3

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;
}
CSS Attribute Selectors - attribute selector example-4

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;
}
CSS Attribute Selectors - attribute selector example-5

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 Selectors - attribute selector example-6

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 Selectors - attribute selector example-7

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;
}
CSS Attribute Selectors - attribute selector example-8

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!

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.