← Back to Chapters

CSS Attribute Selectors

? CSS Attribute Selectors

CSS Attribute Selectors allow you to style HTML elements based on the presence or value of an attribute. You can target links, form fields, images and more using selectors like [href], [type="text"] or [src$=".png"].

This makes your CSS more flexible and reduces the need for extra classes in your HTML.

? Key Concepts

  • Presence: [attr] selects elements that have a given attribute.
  • Exact value: [attr="value"] selects elements whose attribute value matches exactly.
  • Starts with: [attr^="val"] matches attribute values that begin with a value.
  • Ends with: [attr$="val"] matches attribute values that end with a value.
  • Contains: [attr*="val"] matches attribute values that contain a value anywhere.
  • Often used on links (<a>), form inputs, and images.

? Syntax

Common CSS attribute selector patterns:

? View Code Example 
/* 1. Any element that simply has the attribute */
a[target] {
color: red;
}

/* 2. Exact value match */
input[type="text"] {
background-color: lightyellow;
}

/* 3. Value starts with 'https' (secure links) */
a[href^="https"] {
font-weight: bold;
}

/* 4. Value ends with '.png' (PNG images) */
img[src$=".png"] {
border: 2px solid green;
}

/* 5. Class attribute contains 'btn-' anywhere */
button[class*="btn-"] {
padding: 8px 14px;
}

These selectors look at attribute values, not just at classes or IDs. That’s why they are perfect when the HTML is already using attributes like type, href, or src.

? Attribute Selector Types

Quick reference for the main attribute selector variants:

Selector Description Example
[attr] Selects elements that have the attribute input[required]
[attr="value"] Matches an exact attribute value input[type="text"]
[attr^="val"] Value starts with the given text a[href^="https"]
[attr$="val"] Value ends with the given text img[src$=".png"]
[attr*="val"] Value contains the given text button[class*="btn-"]

? Example Markup

Imagine a small “Sign up” section with two links and a few inputs. We will use attribute selectors to style them without adding extra classes.

? View Code Example 
<!-- Links in a small navigation bar -->
<a href="https://blog.example.com" target="_blank">Company Blog</a>
<a href="/pricing.html">Pricing</a>

<!-- Sign up form fields -->
<input type="text" placeholder="Full name" required>
<input type="email" placeholder="Work email">
<input type="password" placeholder="Create password" required>

? Live Output

✨ Which selector matches what?

Below is the same markup, rendered. Use the notes under each group to clearly see how attribute selectors would match these elements.

? Links

Company Blog
Pricing

  • a[target] → matches Company Blog (it has target="_blank").
  • a[href^="https"] → matches Company Blog (its href starts with https).
  • a[href^="/"] → would match Pricing (internal link starting with /).

? Inputs

  • input[type="text"] → matches the first field (Full name).
  • input[type="password"] → matches the third field (Create password).
  • input[required] → matches the first and third fields (they both have required).

In your own stylesheet, you could now add colors, borders, or spacing to each of these groups using only the attribute selectors shown — no extra HTML classes are needed.

? Tips & Best Practices

  • Use attribute selectors when the attribute already carries meaning (like type or href).
  • Prefer classes and IDs for layout and big structural styling; use attribute selectors for specific tweaks.
  • Be explicit: [type="text"] is clearer than just [type] when you need only one kind of input.
  • Attribute selectors can be a bit slower on very large pages, but are fine for normal interfaces.
  • Always check that the attributes you are targeting exist in the HTML, otherwise nothing will match.

? Try It Yourself

  1. Make all external links bold by writing a rule for a[href^="https"].
  2. Highlight required fields using input[required] (for example with a light background color).
  3. Style password fields using input[type="password"] to make them stand out.
  4. Add a new link whose href ends with ".pdf" and style it via a[href$=".pdf"].
  5. Create a couple of buttons with classes like btn-primary and btn-secondary, then style them together using button[class*="btn-"].