Attribute Selectors

CSS Attribute Selectors

CSS attribute selectors select HTML elements according to the presence or value of an attribute. They make it possible to target elements such as links, form controls, and other elements without adding a separate class or ID.

Attribute Selector Syntax

An attribute selector places an attribute name or an attribute comparison inside square brackets ([ ]).

[required] {
  border-color: red;
}

The selector [required] matches elements that have a required attribute, regardless of the element type.

Attribute selectors can also compare the value of an attribute.

[type="email"] {
  background-color: #f5f5f5;
}

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

Selecting by Attribute Presence

The simplest attribute selector checks whether an element has a particular attribute. The value of the attribute does not need to be specified.

[title] {
  color: blue;
}

<p title="More information">This paragraph has a title attribute.</p>
<p>This paragraph does not have a title attribute.</p>

Only the first paragraph matches because it contains the title attribute.

Selecting an Exact Attribute Value

The = operator selects elements whose attribute value exactly matches the specified value.

input[type="email"] {
  background-color: #f5f5f5;
}

<input type="text">
<input type="email">

Only the email input matches because its type attribute has the exact value email.

Selecting a Word in an Attribute Value

The ~= operator matches an attribute whose value contains a particular word in a whitespace-separated list of words.

[class~="featured"] {
  border: 1px solid #0088cc;
}

<div class="product featured">Featured product</div>
<div class="product">Regular product</div>

The first <div> matches because featured appears as a complete word in its class value. A value such as featured-product would not match [class~="featured"] because featured is not a separate whitespace-delimited word.

Selecting the Beginning of a Value

The ^= operator selects elements whose attribute value begins with the specified text.

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

<a href="https://www.example-web.site/">Example Website</a>
<a href="/contact.html">Contact</a>

The first link matches because its href value begins with https://. The relative link does not match.

Selecting the End of a Value

The $= operator selects elements whose attribute value ends with the specified text.

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

<a href="/documents/guide.pdf">PDF Guide</a>
<a href="/documents/guide.html">HTML Guide</a>

Only the first link matches because its href value ends with .pdf.

Selecting Text Within a Value

The *= operator selects elements whose attribute value contains the specified sequence of characters anywhere within the value.

a[href*="gardening"] {
  color: green;
}

<a href="/gardening-guide.html">Gardening Guide</a>
<a href="/contact.html">Contact</a>

The first link matches because its href value contains the text gardening.

Selecting Hyphen-Separated Values

The |= operator matches an attribute value that is exactly the specified value or begins with that value followed immediately by a hyphen. It is commonly associated with language codes.

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

<p lang="en">English</p>
<p lang="en-US">American English</p>
<p lang="fr">French</p>

The first two paragraphs match because their lang values are either exactly en or begin with en-. The paragraph with lang="fr" does not match.

Combining Element and Attribute Selectors

An element selector can be placed directly before an attribute selector to restrict the match to a particular type of HTML element.

input[required] {
  border: 1px solid red;
}

The selector input[required] matches <input> elements that have the required attribute. Other elements with a required attribute are not selected by this rule.

<input type="text" required>
<select required>
  <option>Choose an option</option>
</select>

In this example, the <input> matches input[required], while the <select> does not because the selector specifically requires an <input> element.

Common Attribute Selector Examples

Attribute selectors are especially useful for links and form controls because these elements often use attributes that describe their purpose or behavior.

input[type="email"] {
  background-color: #f5f5f5;
}

input[required] {
  border-color: red;
}

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

a[href^="https://"] {
  text-decoration: underline;
}

These selectors use information already present in the HTML, allowing CSS to target elements without adding extra classes solely for styling.

When to Use Attribute Selectors

Attribute selectors are useful when an element's existing HTML attributes provide a meaningful way to identify what should be styled. They can be particularly convenient for different form control types, required fields, links with particular destinations, and elements with specific attribute values.

Classes are still a good choice when several elements need a reusable style that is not naturally connected to an existing attribute. Choose the selector that most clearly represents why the elements are being styled.

Summary

CSS attribute selectors use square brackets to select elements according to their HTML attributes. They can test whether an attribute is present, whether its value exactly matches another value, or whether the value contains, begins with, or ends with particular text.

Attribute selectors can also be combined with element selectors for more specific targeting. The next tutorial covers pseudo-classes, which select elements according to states, positions, and other conditions.