Attribute Selectors CSS Guide

Introduction

CSS selectors tell the browser which HTML elements to style.

You can select elements by tag name:

1button {2  padding: 10px 16px;3}

You can select elements by class:

1.button {2  padding: 10px 16px;3}

You can select elements by ID:

1#main-content {2  max-width: 1000px;3}

CSS also lets you select elements by their HTML attributes.

These are called attribute selectors.

For example, you can select inputs by their type attribute:

1input[type=”email”] {2  border-color: blue;3}

You can select links by their href attribute:

1a[href] {2  text-decoration: underline;3}

You can select links that open in a new tab using the target attribute:

1a[target=”_blank”] {2  font-weight: bold;3}

Attribute selectors are useful when you want to style elements based on information already written in the HTML.

What Is an Attribute?

An attribute adds extra information to an HTML element.

For example:

1<input type=”email” name=”email”>

This input has two attributes:

1type2name

The type attribute says what kind of input it is.

The name attribute gives the form field a name when form data is submitted.

Another example:

1<a href=”https://example.com” target=”_blank”>Visit Example</a>

This link has two attributes:

1href2target

The href attribute says where the link goes.

The target attribute says how the link should open.

CSS attribute selectors let you target elements based on these attributes.

What Is an Attribute Selector?

An attribute selector selects elements by looking at their attributes.

A basic attribute selector uses square brackets:

1[attribute] {2  property: value;3}

For example:

1[target] {2  font-weight: bold;3}

This selects any element that has a target attribute.

You can also combine an attribute selector with an element selector:

1a[target] {2  font-weight: bold;3}

This selects only <a> elements that have a target attribute.

That is usually safer than selecting every element with the attribute.

Selecting Elements That Have an Attribute

The simplest attribute selector checks whether an attribute exists.

Example:

1a[target] {2  font-weight: bold;3}

HTML:

1<a href=”about.html”>About</a>2 3<a href=”https://example.com” target=”_blank”>External site</a>

The CSS selects the second link because it has a target attribute.

It does not select the first link because the first link does not have target.

This kind of selector does not care what the attribute value is.

It only checks whether the attribute is present.

Selecting Elements by Exact Attribute Value

You can select elements when an attribute has an exact value.

The syntax is:

1element[attribute=”value”] {2  property: value;3}

Example:

1input[type=”email”] {2  border-color: blue;3}

HTML:

1<input type=”text” name=”name”>2<input type=”email” name=”email”>3<input type=”password” name=”password”>

This CSS selects only the email input:

1<input type=”email” name=”email”>

It does not select the text input or password input.

The attribute value must match exactly.

Attribute Selectors with Input Types

Form inputs often use the type attribute.

Examples:

1<input type=”text”>2<input type=”email”>3<input type=”password”>4<input type=”search”>5<input type=”checkbox”>6<input type=”radio”>7<input type=”submit”>

You can style each type differently:

1input[type=”text”],2input[type=”email”],3input[type=”password”],4input[type=”search”] {5  width: 100%;6  padding: 10px;7}

This selector list targets text-like inputs.

You can style submit buttons separately:

1input[type=”submit”] {2  padding: 10px 16px;3  cursor: pointer;4}

Attribute selectors are useful here because many form controls use the same <input> element but behave differently depending on type.

Why Input Attribute Selectors Are Useful

Without attribute selectors, this CSS would affect every input:

1input {2  width: 100%;3}

That may be a problem.

It would also affect checkboxes and radio buttons.

For example:

1<input type=”checkbox” id=”terms”>2<label for=”terms”>I agree to the terms</label>

A checkbox should not usually be width: 100%.

A more careful approach is:

1input[type=”text”],2input[type=”email”],3input[type=”password”],4input[type=”search”] {5  width: 100%;6}

This targets the larger text-entry fields without affecting checkboxes and radio buttons.

Styling Required Fields

HTML form controls can use the required attribute:

1<input type=”email” name=”email” required>

You can select required fields:

1input[required],2textarea[required],3select[required] {4  border-color: #0055cc;5}

This targets form controls that have the required attribute.

You can also combine this with a type selector:

1input[type=”email”][required] {2  border-color: navy;3}

This selects only required email inputs.

Combining Multiple Attribute Selectors

You can use more than one attribute selector on the same element.

Example:

1input[type=”email”][required] {2  border-color: navy;3}

This means:

1select input elements2where type=”email”3and required is present

HTML:

1<input type=”email” required>2<input type=”email”>3<input type=”text” required>

Only the first input matches both conditions.

The second has type="email" but is not required.

The third is required but is not an email input.

Attribute Selectors with Links

Links use the href attribute.

Example:

1<a href=”about.html”>About</a>

You can select links that have an href attribute:

1a[href] {2  color: #0055cc;3}

This targets links with destinations.

It does not target an <a> element without href:

1<a>Placeholder link</a>

In most real cases, links should have meaningful href values if they are intended to navigate somewhere.

Selecting External Links

You can use attribute selectors to target links based on the start of the href value.

For example:

1a[href^=”https://”] {2  font-weight: bold;3}

The ^= operator means “starts with”.

This selects links whose href starts with https://.

HTML:

1<a href=”about.html”>About</a>2<a href=”https://example.com”>External website</a>

The second link matches.

The first link does not.

This can be useful for styling external links differently.

Selecting Links That Open in a New Tab

Links can use target="_blank" to open in a new browsing context.

Example:

1<a href=”https://example.com” target=”_blank”>Visit Example</a>

You can select these links:

1a[target=”_blank”] {2  font-weight: bold;3}

This targets links where the target attribute is exactly _blank.

You might use this to add a visual cue:

1a[target=”_blank”]::after {2  content: ” ↗”;3}

This adds a small symbol after links that open in a new tab.

Use this kind of visual cue carefully so it improves clarity rather than adding clutter.

Attribute Selector Operators

CSS supports several attribute selector patterns.

The most common ones are:

1[attr] selects elements with the attribute2[attr=”value”] selects an exact value3[attr^=”value”] selects values that start with something4[attr$=”value”] selects values that end with something5[attr*=”value”] selects values that contain something6[attr~=”value”] selects a word in a space-separated list7[attr|=”value”] selects a value or value followed by a hyphen

You do not need to memorise every operator immediately.

Start with [attr] and [attr="value"].

Then learn the others when you need more flexible matching.

Exact Match: [attr="value"]

The exact match selector checks whether the attribute value matches exactly.

Example:

1input[type=”password”] {2  letter-spacing: 0.05em;3}

HTML:

1<input type=”password”>2<input type=”text”>

Only the password input matches.

Another example:

1a[target=”_blank”] {2  font-weight: bold;3}

This selects links where target is exactly _blank.

Exact match selectors are clear and common.

Starts With: [attr^="value"]

The ^= operator means the attribute value starts with a certain string.

Example:

1a[href^=”https://”] {2  color: darkgreen;3}

This matches:

1<a href=”https://example.com”>Secure external link</a>

It does not match:

1<a href=”about.html”>Internal page</a>

This can be useful when styling links by URL pattern.

Another example:

1a[href^=”mailto:”] {2  color: purple;3}

This selects email links:

1<a href=”mailto:[email protected]”>Email us</a>

Ends With: [attr$="value"]

The $= operator means the attribute value ends with a certain string.

Example:

1a[href$=”.pdf”] {2  font-weight: bold;3}

This matches:

1<a href=”files/report.pdf”>Download report</a>

It does not match:

1<a href=”files/report.docx”>Download document</a>

This can be useful for styling links to file types.

Other examples:

1a[href$=”.zip”] {2  font-weight: bold;3}

1img[src$=”.svg”] {2  max-width: 100%;3}

Use this carefully because URLs may include query strings that change what the value ends with.

Contains: [attr*="value"]

The *= operator means the attribute value contains a certain string.

Example:

1a[href*=”example.com”] {2  font-weight: bold;3}

This matches:

1<a href=”https://example.com/page”>Example page</a>

It also matches:

1<a href=”https://docs.example.com”>Example docs</a>

The value only needs to appear somewhere inside the attribute.

This is flexible, but it can also match more than you expect.

Use contains selectors carefully.

Space-Separated Word Match: [attr~="value"]

The ~= operator checks for a word inside a space-separated attribute value.

This is commonly useful for attributes that contain lists of words.

Example:

1[data-tags~=”featured”] {2  border: 2px solid navy;3}

HTML:

1<article data-tags=”featured tutorial css”>2  Featured article3</article>

This matches because featured is one of the space-separated words.

It would not match:

1<article data-tags=”featured-tutorial”>2  Different article3</article>

because featured is not a separate word there.

Hyphen Match: [attr|="value"]

The |= operator matches an exact value or a value followed by a hyphen.

It is often associated with language codes.

Example:

1[lang|=”en”] {2  font-family: Arial, sans-serif;3}

This matches:

1<p lang=”en”>English text.</p>

It also matches:

1<p lang=”en-GB”>British English text.</p>

It does not match:

1<p lang=”fr”>French text.</p>

This selector is less common than exact, starts-with, ends-with, and contains selectors, but it is useful in specific cases.

Attribute Selectors with Data Attributes

HTML supports custom data attributes.

They start with data-.

Example:

1<article data-featured=”true”>2  Featured article3</article>

You can select them with CSS:

1[data-featured=”true”] {2  border: 2px solid navy;3}

Another example:

1<button data-variant=”primary”>Save</button>2<button data-variant=”secondary”>Cancel</button>

CSS:

1button[data-variant=”primary”] {2  background-color: navy;3  color: white;4}5 6button[data-variant=”secondary”] {7  background-color: white;8  color: navy;9}

Data attributes can be useful for styling, scripting, and storing small pieces of custom information.

Attribute Selectors and Case Sensitivity

Attribute selector matching can be case-sensitive or case-insensitive depending on the attribute, document language, and selector flags.

For normal learning projects, the safest approach is to keep attribute values consistent.

For example, prefer:

1<input type=”email”>

rather than mixing:

1<input type=”Email”>

You can also use a case-insensitive flag in some selectors:

1a[href$=”.pdf” i] {2  font-weight: bold;3}

The i means case-insensitive matching.

This can match .pdf, .PDF, or .Pdf.

You do not need this often at first, but it is useful to know it exists.

Attribute Selectors and Specificity

An attribute selector has similar specificity to a class selector.

For example:

1input[type=”email”] {2  border-color: blue;3}

has more specificity than:

1input {2  border-color: gray;3}

HTML:

1<input type=”email”>

If both rules apply, the email-specific rule can override the general input rule.

Attribute selectors are not as specific as ID selectors, but they are more specific than simple type selectors.

Combining Attribute Selectors with Classes

You can combine attribute selectors with class selectors.

HTML:

1<input class=”form-control” type=”email” required>

CSS:

1.form-control[type=”email”] {2  border-color: blue;3}

This means:

1select elements with class=”form-control”2that also have type=”email”

You can also write:

1.form-control[required] {2  border-left: 4px solid navy;3}

This targets required form controls with the form-control class.

Combining Attribute Selectors with Pseudo-Classes

Attribute selectors can work with pseudo-classes.

Example:

1input[type=”email”]:focus {2  outline: 2px solid #0055cc;3}

This selects an email input when it has focus.

Another example:

1a[target=”_blank”]:hover {2  text-decoration: underline;3}

This styles links that open in a new tab when the user hovers over them.

These combinations are common when styling form states and link states.

Attribute Selectors with Forms

Here is a form example:

1<form>2  <label for=”name”>Name</label>3  <input type=”text” id=”name” name=”name”>4 5  <label for=”email”>Email</label>6  <input type=”email” id=”email” name=”email” required>7 8  <label for=”password”>Password</label>9  <input type=”password” id=”password” name=”password”>10 11  <input type=”submit” value=”Create account”>12</form>

CSS:

1input[type=”text”],2input[type=”email”],3input[type=”password”] {4  width: 100%;5  padding: 10px;6}7 8input[required] {9  border-left: 4px solid navy;10}11 12input[type=”submit”] {13  padding: 10px 16px;14  cursor: pointer;15}

This uses attribute selectors to style different inputs appropriately.

Attribute Selectors with Links

Here is a link example:

1<p>2  <a href=”about.html”>About us</a>3</p>4 5<p>6  <a href=”https://example.com” target=”_blank”>External resource</a>7</p>8 9<p>10  <a href=”files/guide.pdf”>Download the guide</a>11</p>

CSS:

1a[href^=”https://”] {2  font-weight: bold;3}4 5a[target=”_blank”]::after {6  content: ” ↗”;7}8 9a[href$=”.pdf”]::after {10  content: ” PDF”;11}

This styles external links, links opening in new tabs, and PDF links.

Be careful with generated content.

If a label is important for understanding, consider including it in the HTML rather than only in CSS.

Attribute Selectors with Target

The target attribute commonly appears on links.

Example:

1<a href=”https://example.com” target=”_blank”>Visit Example</a>

CSS:

1a[target=”_blank”] {2  font-weight: bold;3}

This can help indicate that the link behaves differently.

However, opening links in new tabs or windows can affect user experience.

When you use target="_blank", it is often good practice to make that behaviour clear to users.

A visible cue can help:

1a[target=”_blank”]::after {2  content: ” opens in new tab”;3}

This may be too long for some designs, but it shows the idea.

Attribute Selectors with Download Links

The download attribute can be used on links.

Example:

1<a href=”files/template.zip” download>Download template</a>

You can select download links:

1a[download] {2  font-weight: bold;3}

This selects links that have a download attribute.

You can also combine it with file extension matching:

1a[href$=”.zip”][download] {2  color: darkgreen;3}

This selects download links that point to .zip files.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Attribute Selectors Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <h1>Attribute Selectors</h1>12 13    <form class=”signup-form”>14      <label for=”name”>Name</label>15      <input type=”text” id=”name” name=”name”>16 17      <label for=”email”>Email address</label>18      <input type=”email” id=”email” name=”email” required>19 20      <label for=”password”>Password</label>21      <input type=”password” id=”password” name=”password”>22 23      <input type=”submit” value=”Create account”>24    </form>25 26    <section>27      <h2>Useful Links</h2>28 29      <p>30        <a href=”about.html”>About this website</a>31      </p>32 33      <p>34        <a href=”https://example.com” target=”_blank”>External resource</a>35      </p>36 37      <p>38        <a href=”files/css-guide.pdf”>Download the CSS guide</a>39      </p>40    </section>41  </main>42 43</body>44</html>

CSS:

1/* Text-like form fields */2input[type=”text”],3input[type=”email”],4input[type=”password”] {5  width: 100%;6  padding: 10px;7  margin-bottom: 16px;8}9 10/* Required fields */11input[required] {12  border-left: 4px solid navy;13}14 15/* Submit input */16input[type=”submit”] {17  padding: 10px 16px;18  cursor: pointer;19}20 21/* External links */22a[href^=”https://”] {23  font-weight: bold;24}25 26/* Links that open in a new tab */27a[target=”_blank”]::after {28  content: ” ↗”;29}30 31/* PDF links */32a[href$=”.pdf”] {33  font-weight: bold;34}

This example uses attribute selectors for form controls, required fields, external links, new-tab links, and PDF links.

How the Complete Example Works

This selector targets text-like input fields:

1input[type=”text”],2input[type=”email”],3input[type=”password”] {4  width: 100%;5}

This selector targets required inputs:

1input[required] {2  border-left: 4px solid navy;3}

This selector targets submit inputs:

1input[type=”submit”] {2  cursor: pointer;3}

This selector targets links that start with https://:

1a[href^=”https://”] {2  font-weight: bold;3}

This selector targets links that open in a new tab:

1a[target=”_blank”]::after {2  content: ” ↗”;3}

This selector targets PDF links:

1a[href$=”.pdf”] {2  font-weight: bold;3}

Each rule selects elements based on attributes already present in the HTML.

Common Mistake: Forgetting Square Brackets

Incorrect:

1input type=”email” {2  border-color: blue;3}

Correct:

1input[type=”email”] {2  border-color: blue;3}

Attribute selectors use square brackets.

The attribute condition goes inside the brackets.

Common Mistake: Confusing Classes with Attributes

This selects a class:

1.email {2  color: blue;3}

This selects an attribute value:

1input[type=”email”] {2  color: blue;3}

They are not the same.

HTML for the class selector:

1<p class=”email”>Email us today.</p>

HTML for the attribute selector:

1<input type=”email”>

Use class selectors for class names.

Use attribute selectors for attributes and attribute values.

Common Mistake: Using Exact Match When the Value Can Vary

This selector matches only exactly .pdf at the end:

1a[href$=”.pdf”] {2  font-weight: bold;3}

It may not match a URL like:

1<a href=”files/guide.pdf?download=true”>Download guide</a>

because the value ends with true, not .pdf.

In this case, a contains selector may be more useful:

1a[href*=”.pdf”] {2  font-weight: bold;3}

But use *= carefully because it can match more than expected.

Common Mistake: Overusing Attribute Selectors Instead of Classes

This works:

1button[data-variant=”primary”] {2  background-color: navy;3}

But for many simple styling patterns, a class may be clearer:

1<button class=”button button-primary”>Save</button>

1.button-primary {2  background-color: navy;3}

Attribute selectors are useful when the attribute itself is meaningful.

Classes are often clearer for general styling.

Use the tool that best describes the purpose.

Common Mistake: Making Selectors Too Specific

This may be more specific than needed:

1form.signup-form input[type=”email”][required] {2  border-color: navy;3}

A simpler selector may be enough:

1input[type=”email”][required] {2  border-color: navy;3}

or:

1.form-control[required] {2  border-color: navy;3}

Overly specific selectors can make CSS harder to override later.

Use enough specificity to target the element, but not more than necessary.

Common Mistake: Using Generated Content for Essential Information

This can add a visual note:

1a[target=”_blank”]::after {2  content: ” ↗”;3}

That may be fine as a visual cue.

However, do not put essential information only in CSS if users need it to understand the page.

Important content should usually be present in the HTML.

CSS should support presentation, not become the only source of meaning.

Common Mistake: Forgetting Attribute Values Must Match

CSS:

1input[type=”email”] {2  border-color: blue;3}

HTML:

1<input type=”text” name=”email”>

This does not match because the input type is text, not email.

The name attribute is email, but the selector checks the type attribute.

To select by name, you would write:

1input[name=”email”] {2  border-color: blue;3}

Make sure the selector checks the correct attribute.

Common Mistake: Styling All Inputs the Same

This can cause layout problems:

1input {2  width: 100%;3}

It affects text inputs, checkboxes, radio buttons, submit buttons, hidden inputs, and more.

A better approach:

1input[type=”text”],2input[type=”email”],3input[type=”password”],4input[type=”search”] {5  width: 100%;6}

This targets text-entry fields more carefully.

Attribute selectors help prevent broad input rules from affecting controls that should look different.

Best Practices

Use [attr] to select elements that have an attribute.

Use [attr="value"] to select exact attribute values.

Use input[type="..."] to style different form controls appropriately.

Use a[href] to target real links.

Use a[target="_blank"] to style links that open in a new tab.

Use a[href^="https://"] for links that start with a URL pattern.

Use a[href$=".pdf"] for links ending with a file extension.

Use *= carefully because it can match more than expected.

Combine attribute selectors with element or class selectors for clearer targeting.

Avoid making selectors more specific than necessary.

Use classes when they communicate styling intent more clearly.

Keep important content in HTML, not only in CSS-generated content.

Use browser developer tools to check whether an attribute selector matches.

Summary

Attribute selectors let CSS target elements based on HTML attributes.

The simplest form checks whether an attribute exists:

1a[href] {2  color: blue;3}

An exact match checks for a specific value:

1input[type=”email”] {2  border-color: blue;3}

You can also match parts of attribute values:

1a[href^=”https://”] {2  font-weight: bold;3}

1a[href$=”.pdf”] {2  font-weight: bold;3}

1a[href*=”example.com”] {2  font-weight: bold;3}

Attribute selectors are especially useful for forms and links.

They let you style email fields, password fields, required fields, submit inputs, external links, download links, and links that open in new tabs.

The main idea is simple:

1Attribute selectors style elements based on information already written in the HTML.

Used carefully, they help you write more precise CSS without adding unnecessary classes.