Bird
Raised Fist0
CSSmarkup~5 mins

Attribute selectors in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the CSS attribute selector [type="text"] select?
easy
A. All elements with a class named "text"
B. All elements with an attribute type equal to "text"
C. All elements with an ID named "text"
D. All elements that contain the word "text" anywhere

Solution

  1. Step 1: Understand attribute selector syntax

    The selector [type="text"] targets elements that have an attribute named type with the exact value "text".

  2. Step 2: Differentiate from class and ID selectors

    Class selectors use a dot (.) and ID selectors use a hash (#), so this selector is not for class or ID.

  3. Final Answer:

    All elements with an attribute type equal to "text" -> Option B

  4. Quick Check:

    Attribute selector = exact attribute match [OK]
Hint: Attribute selectors match exact attribute values [OK]
Common Mistakes:
  • Confusing attribute selector with class or ID selectors
  • Thinking it matches partial attribute values
  • Assuming it selects elements containing the word anywhere
2. Which of the following is the correct CSS syntax to select all input elements with a placeholder attribute?
easy
A. input[placeholder]
B. input.placeholder
C. input#placeholder
D. input(placeholder)

Solution

  1. Step 1: Identify attribute selector syntax

    To select elements with a specific attribute regardless of value, use [attribute]. So input[placeholder] selects all input elements with a placeholder attribute.

  2. Step 2: Eliminate incorrect syntax

    input.placeholder selects inputs with class "placeholder"; input#placeholder selects input with ID "placeholder"; input(placeholder) is invalid CSS syntax.

  3. Final Answer:

    input[placeholder] -> Option A

  4. Quick Check:

    Attribute presence selector = [attribute] [OK]
Hint: Use square brackets for attribute presence [OK]
Common Mistakes:
  • Using dot or hash instead of square brackets
  • Trying to use parentheses for attributes
  • Confusing attribute selectors with class or ID selectors
3. Given the CSS rule a[href^="https"] { color: green; } and the HTML below, which links will appear green?

<a href="https://example.com">Link 1</a>
<a href="http://example.com">Link 2</a>
<a href="https://secure.com">Link 3</a>
<a href="ftp://example.com">Link 4</a>
medium
A. Only Link 1
B. Link 2 and Link 4
C. Link 1 and Link 3
D. All links

Solution

  1. Step 1: Understand the attribute selector [href^="https"]

    The caret (^) means "starts with". This selector matches a elements whose href attribute starts with "https".

  2. Step 2: Check each link's href value

    Link 1: "https://example.com" starts with "https" - matches.
    Link 2: "http://example.com" starts with "http" - no.
    Link 3: "https://secure.com" starts with "https" - matches.
    Link 4: "ftp://example.com" starts with "ftp" - no.

  3. Final Answer:

    Link 1 and Link 3 -> Option C

  4. Quick Check:

    ^ means starts with = Link 1 & 3 green [OK]
Hint: ^ means attribute value starts with given string [OK]
Common Mistakes:
  • Confusing ^ with $ or * in attribute selectors
  • Assuming partial match anywhere instead of start
  • Ignoring exact string case sensitivity
4. The CSS below is intended to select all img elements with an alt attribute ending with ".jpg". Why does it not work?

img[alt*=".jpg"] { border: 2px solid red; }

What is the correct fix?
medium
A. Change *= to $= to match the end of the attribute
B. Change *= to ^= to match the start of the attribute
C. Add quotes around the selector like "img[alt*='.jpg']"
D. Use img[alt~='.jpg'] to match the word

Solution

  1. Step 1: Understand attribute selector operators

    *= means "contains" anywhere, $= means "ends with", ^= means "starts with".

  2. Step 2: Match attribute ending with ".jpg"

    Since we want to select elements whose alt attribute ends with ".jpg", we must use $= instead of *=.

  3. Final Answer:

    Change *= to $= to match the end of the attribute -> Option A

  4. Quick Check:

    $= means ends with [OK]
Hint: Use $= to select attributes ending with a value [OK]
Common Mistakes:
  • Using *= which matches anywhere, not just the end
  • Confusing ^= (start) with $= (end)
  • Adding quotes incorrectly around selectors
5. You want to style all button elements that have a data-action attribute starting with "save" but only if the attribute value is exactly "save" or starts with "save-" (like "save-draft"). Which CSS selector correctly achieves this?
hard
A. button[data-action$="save"], button[data-action^="save-"]
B. button[data-action^="save"]
C. button[data-action*="save"]
D. button[data-action="save"], button[data-action^="save-"]

Solution

  1. Step 1: Understand the requirement

    We want buttons where data-action is exactly "save" OR starts with "save-".

  2. Step 2: Choose selectors for exact and prefix matches

    [data-action="save"] matches exactly "save".
    [data-action^="save-"] matches values starting with "save-".
    Combining with a comma selects both sets.

  3. Step 3: Analyze other options

    [data-action^="save"] matches any value starting with "save", including "savegame" which is not desired.
    [data-action*="save"] matches anywhere "save" appears, too broad.
    [data-action$="save"] matches values ending with "save", not what we want.

  4. Final Answer:

    button[data-action="save"], button[data-action^="save-"] -> Option D

  5. Quick Check:

    Exact match + prefix with dash = button[data-action="save"], button[data-action^="save-"] [OK]
Hint: Combine exact and prefix selectors with comma for precise matches [OK]
Common Mistakes:
  • Using only prefix selector which matches unwanted values
  • Using contains (*) selector which is too broad
  • Confusing $= (ends with) with ^= (starts with)