0
0
CSSmarkup~5 mins

Attribute selectors in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Attribute selectors let you style HTML elements based on their attributes. This helps you target elements more precisely without adding extra classes or IDs.

You want to style all links that open in a new tab (target="_blank").
You want to highlight form inputs that are required (required attribute).
You want to style images with a specific alt text.
You want to change the style of buttons with a certain data attribute.
You want to style elements that have a specific attribute regardless of its value.
Syntax
CSS
[attribute] { /* styles */ }
[attribute="value"] { /* styles */ }
[attribute~="value"] { /* styles */ }
[attribute|="value"] { /* styles */ }
[attribute^="value"] { /* styles */ }
[attribute$="value"] { /* styles */ }
[attribute*="value"] { /* styles */ }

The simplest form [attribute] selects elements with that attribute, no matter its value.

Other forms let you match exact or partial values inside the attribute.

Examples
Selects all links (<a>) that have a target attribute, no matter its value.
CSS
a[target] {
  color: red;
}
Selects all checkboxes by matching the exact type attribute value.
CSS
input[type="checkbox"] {
  accent-color: green;
}
Selects all links where the href attribute starts with "https".
CSS
a[href^="https"] {
  font-weight: bold;
}
Selects all images whose alt attribute contains the word "logo" anywhere.
CSS
img[alt*="logo"] {
  border: 2px solid blue;
}
Sample Program

This page shows how attribute selectors style elements based on their attributes:

  • Links with target="_blank" become red and underlined.
  • Inputs with the required attribute get an orange border.
  • Images whose alt text contains "logo" get a blue border and smaller size.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Attribute Selectors Example</title>
  <style>
    /* Style all links that open in new tab */
    a[target="_blank"] {
      color: red;
      text-decoration: underline;
    }

    /* Style inputs that are required */
    input[required] {
      border: 2px solid orange;
      padding: 0.3rem;
    }

    /* Style images with alt containing 'logo' */
    img[alt*="logo"] {
      border: 3px solid blue;
      max-width: 6rem;
      display: block;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <main>
    <h1>Attribute Selectors Demo</h1>
    <section>
      <h2>Links</h2>
      <a href="https://example.com" target="_blank">Open Example in new tab</a><br />
      <a href="https://example.com">Open Example in same tab</a>
    </section>
    <section>
      <h2>Form Inputs</h2>
      <label>
        Name (required):
        <input type="text" required />
      </label><br />
      <label>
        Email (optional):
        <input type="email" />
      </label>
    </section>
    <section>
      <h2>Images</h2>
      <img src="https://via.placeholder.com/100" alt="company logo" />
      <img src="https://via.placeholder.com/100" alt="profile picture" />
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Attribute selectors are case-sensitive for attribute values in HTML.

They help keep your HTML clean by avoiding extra classes just for styling.

Use browser DevTools to inspect elements and test attribute selectors live.

Summary

Attribute selectors let you style elements based on their attributes and values.

They are useful for targeting elements without adding extra classes or IDs.

Common forms include matching presence, exact value, starts with, ends with, and contains.