Attribute selectors, written as [attribute] or [attribute="value"], target elements based on the presence or specific value of an HTML attribute, rather than their tag name, class, or id.

Syntax

[attribute] {
  property: value;
}
[attribute="value"] {
  property: value;
}

Deep Dive Course

[attribute] matches any element that has that attribute at all, regardless of its value, while [attribute="value"] matches only elements where that attribute's value exactly equals the given string — additional operators extend this matching, like [attribute^="value"] for values starting with a given string, [attribute$="value"] for values ending with it, and [attribute*="value"] for values containing it anywhere. This is especially useful for styling form inputs based on their type attribute, like input[type="checkbox"], or targeting links based on their href, like a[href^="https://"] for external links, without needing a dedicated class added specifically for that purpose.

1Understanding Attribute Selectors

💡

Use [target="_blank"], or [href^="http"] combined with excluding your own domain, to visually distinguish external links, like adding an icon, without needing to manually add a class to every single external link in your content.

editor.html

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

localhost:3000

2Practical Example

Here is a real-world application of Attribute Selectors showing how it is used in production CSS code.

editor.html

a[href$=".pdf"] {
  color: darkred;
}

<a href="report.pdf">Report</a>
<a href="page.html">Page</a>

localhost:3000

3Best Practices

Follow these guidelines when working with Attribute Selectors:

1. Use [type="..."] attribute selectors to style different form input types distinctly, like checkboxes versus text inputs, without needing extra classes

2. Use [href^="..."] or [href$="..."] to target links by their URL pattern, like external links or links to a specific file type, directly from the markup's existing attributes

3. Prefer a dedicated class over an attribute selector when the underlying attribute's value might change for unrelated reasons, since the styling would then unintentionally change with it

⚠️

Tip: Use [target="_blank"], or [href^="http"] combined with excluding your own domain, to visually distinguish external links, like adding an icon, without needing to manually add a class to every single external link in your content.

editor.html

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

localhost:3000

Examples

Example 01Basic Usage

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

Example 02Advanced Example

a[href$=".pdf"] {
  color: darkred;
}

<a href="report.pdf">Report</a>
<a href="page.html">Page</a>

Best Practices

Use [type="..."] attribute selectors to style different form input types distinctly, like checkboxes versus text inputs, without needing extra classes
Use [href^="..."] or [href$="..."] to target links by their URL pattern, like external links or links to a specific file type, directly from the markup's existing attributes
Prefer a dedicated class over an attribute selector when the underlying attribute's value might change for unrelated reasons, since the styling would then unintentionally change with it

Interview Question

Why is using an attribute selector like [href$=".pdf"] to style PDF links generally more maintainable than manually adding a specific class to every single PDF link in the content?▼

Hint: Think about what happens to existing and future content if you rely on a manually-added class versus a rule that automatically matches based on an attribute already present in the markup.

Relying on a manually-added class requires every single author, including anyone adding content in the future, to remember to add that specific class every time they link to a PDF file, which is easy to forget, especially in a large site with many contributors or content added over a long period, resulting in inconsistently-styled links whenever that step gets missed. An attribute selector like [href$=".pdf"] instead matches automatically based on information, the href value, that's already necessarily present on every link regardless of who wrote it or when, since a link to a PDF file must have an href ending in .pdf to actually function as a link to that file in the first place. This means the styling stays automatically, consistently correct for every current and future PDF link without requiring any extra manual step, effort, or reliance on content authors remembering an additional convention beyond simply writing a normal, functional link.

Exercises

MediumPractice using Attribute Selectors in a real scenario.

View Solution

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

Frequently Asked Questions

Why is using an attribute selector like [href$=".pdf"] to style PDF links generally more maintainable than manually adding a specific class to every single PDF link in the content?▼

Related Functions

Class-SelectorsBasic-SelectorsDescendant-Selectors