CSS Attribute Selectors

CSS attribute selectors select HTML elements based on the presence or value of an attribute. They make it possible to style elements without requiring an additional class or ID.

Attribute selectors can test whether an attribute exists, matches an exact value, contains a particular word or text sequence, or begins or ends with a specified value.

Attribute Presence Selector

An attribute presence selector matches elements that contain a specified attribute, regardless of the attribute's value. The attribute name is placed inside square brackets.

a[target] {
  font-weight: bold;
}

This selector matches every <a> element that has a target attribute.

<a href="page.html" target="_blank">Open Page</a>

Exact Attribute Value

The [attribute="value"] selector matches elements when the attribute value exactly matches the specified value.

input[type="email"] {
  border: 2px solid blue;
}

This selector matches <input> elements whose type attribute has the exact value email.

<input type="email" name="email">

Attribute Value Contains a Word

The [attribute~="value"] selector matches an attribute containing the specified value as a complete whitespace-separated word.

[class~="featured"] {
  background-color: #ffffcc;
}

This selector matches an element when featured appears as a complete word in its class attribute.

<div class="article featured">Featured article</div>

It would not match a value such as featured-item because featured is not a separate whitespace-separated word in that value.

Attribute Value with a Hyphen

The [attribute|="value"] selector matches an attribute whose value is exactly the specified value or begins with that value immediately followed by a hyphen.

[lang|="en"] {
  font-style: italic;
}

This selector can match values such as en, en-US, and en-GB.

<p lang="en-US">English text</p>

This form of attribute selector is particularly useful for values that use hyphen-separated language or category conventions.

Attribute Value Starts With

The [attribute^="value"] selector matches elements whose attribute value begins with the specified text.

a[href^="https://"] {
  font-weight: bold;
}

This selector matches links whose href value begins with https://.

Attribute Value Ends With

The [attribute$="value"] selector matches elements whose attribute value ends with the specified text.

a[href$=".pdf"] {
  font-weight: bold;
}

This selector matches links whose href value ends with .pdf.

<a href="guide.pdf">Download Guide</a>

Attribute Value Contains Text

The [attribute*="value"] selector matches elements whose attribute value contains the specified sequence of characters anywhere within the value.

a[href*="example"] {
  color: blue;
}

This selector matches links when the text example appears anywhere in the href attribute value.

Unlike the ~= selector, the text does not need to be a complete whitespace-separated word.

Attribute Selectors Example

The following example uses several attribute selectors to style links according to their attributes and attribute values.

<style>
a[target] {
  font-weight: bold;
}
a[href^="https://"] {
  color: green;
}
a[href$=".pdf"] {
  background-color: #ffffcc;
}
</style>

<p><a href="https://www.example-web.site" target="_blank">Example Website</a></p>
<p><a href="guide.pdf">Download PDF Guide</a></p>
<p><a href="contact.html">Contact Page</a></p>

Play in Editor

The first link matches the [target] and [href^="https://"] selectors. The second link matches [href$=".pdf"], while the third link does not match any of these attribute selectors.