CSS Attr Selectors

CSS Attribute Selectors

Attribute selectors in CSS allow you to select and style HTML elements based on the presence of an attribute or the specific value of an attribute. They offer a powerful way to target elements without relying solely on classes or IDs.

Styling HTML Elements With Specific Attributes

Attribute selectors are highly versatile and are well-supported in all modern web browsers. They provide fine-grained control over element selection.

1. [attribute] Selector (Presence)

Selects elements that have the specified attribute, regardless of its value.

Example: Style all <a> elements that have a target attribute:

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

This would style <a href="..." target="_blank"> and <a href="..." target="_self">, but not <a href="...">.

2. [attribute="value"] Selector (Exact Value)

Selects elements where the specified attribute has an exact, case-sensitive value.

Example: Style all <a> elements with target="_blank":

a[target="_blank"] {
  color: green;
  text-decoration: underline dashed;
}

Example: Style all input fields of type text:

input[type="text"] {
  border: 2px solid steelblue;
  padding: 5px;
}

3. [attribute~="value"] Selector (Word in Space-Separated List)

Selects elements where the attribute’s value is a space-separated list of words, and one of those words is exactly the specified value.

Example: Style elements with a title attribute containing the word “important”:

[title~="important"] {
  border: 2px solid red;
  font-weight: bold;
}

This would match title="very important note" or title="important", but not title="unimportant" or title="importance".

4. [attribute|="value"] Selector (Starts with Value or Value-)

Selects elements where the attribute’s value either exactly matches value or starts with value immediately followed by a hyphen (-). This is often used for language subcode matching.

Example: Style elements with a lang attribute that is “en” or starts with “en-”:

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

This would match lang="en", lang="en-US", and lang="en-GB", but not lang="english" or lang="fr-en".

5. [attribute^="value"] Selector (Starts With)

Selects elements where the attribute’s value begins with the specified value. The match does not need to be a whole word.

Example: Style all <a> elements whose href attribute starts with “https://“:

a[href^="https://"] {
  background-image: url('secure-icon.png');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 18px; /* Space for the icon */
}

6. [attribute$="value"] Selector (Ends With)

Selects elements where the attribute’s value ends with the specified value. The match does not need to be a whole word.

Example: Style all <a> elements whose href attribute ends with “.pdf”:

a[href$=".pdf"] {
  font-weight: bold;
  color: darkred;
  /* Add a PDF icon, for example */
}

7. [attribute*="value"] Selector (Contains)

Selects elements where the attribute’s value contains the specified value substring. The match does not need to be a whole word.

Example: Style all <img> elements whose alt text contains the word “profile”:

img[alt*="profile"] {
  border-radius: 50%; /* Make profile images circular */
  border: 3px solid dodgerblue;
}

Case Insensitivity (CSS Selectors Level 4)

CSS Selectors Level 4 introduces a case-insensitive flag i for attribute selectors. This allows matching attribute values regardless of their casing.

Example: Select input elements with type="TEXT" or type="text" or type="Text" etc.:

input[type="text" i] {
  background-color: lightyellow;
}

Browser support for the i flag is good in modern browsers, but always check compatibility if supporting older browsers is a concern.

Practical Use Case: Styling Forms

Attribute selectors are particularly useful for styling form elements without needing to add classes to every input.

/* Style text, email, and password inputs */
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

/* Style required fields differently */
input[required] {
  border-left: 3px solid red;
}

Further Exploration

Attribute selectors can be combined with other selectors (like class, ID, or pseudo-class selectors) for even more specific targeting. For a complete reference and more examples, consult the MDN Web Docs on Attribute Selectors or the official W3C CSS specifications.