Attribute Selectors in CSS

When you start learning CSS, you usually begin with styling elements by tag (p, h1), class (.button), or ID (#header). But there’s another powerful tool you can use: attribute selectors.

Attribute selectors let you style elements based on the attributes they already have in HTML—things like href, type, placeholder, or target. This means less extra classes to manage, and more flexible styling.

In this article, you’ll learn what attribute selectors are, how to use the most common ones, and how to apply them in practical examples. You don’t need any prior coding experience—just some curiosity and a willingness to experiment.

What is an attribute in HTML?

Before we jump into CSS, let’s quickly understand attributes.

In HTML, an attribute is extra information added to a tag. For example:

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

Here:

href and target are attributes.
"https://example.com" and "_blank" are the values of those attributes.

CSS attribute selectors let us style elements based on these attributes and their values.

Basic attribute selector: `[attribute]`

The simplest attribute selector looks like this:

a[target] {
  color: red;      /* Make the text red */
  text-decoration: underline; /* Add underline */
}

This means:

“Select all <a> (link) elements that have a target attribute.”

So this HTML will be styled:

<a href="https://example.com" target="_blank">Opens in new tab</a>

And this HTML will not be styled, because it has no target:

<a href="https://example.com">Opens in same tab</a>

Try it yourself

Create a new file called attribute-basic.html.
Add this code and open it in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Basic Attribute Selector</title>
  <style>
    /* Style only links that have a target attribute */
    a[target] {
      color: red;
      text-decoration: underline;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <a href="https://example.com" target="_blank">Link with target</a><br>
  <a href="https://example.com">Link without target</a>
</body>
</html>

You should see the first link styled in bold red with an underline, while the second link looks normal.

Attribute equals selector: `[attribute="value"]`

Often, you don’t just want “any element with this attribute”—you want elements where the attribute has a specific value.

For that, you use:

[attribute="value"] { ... }

Example: Style only email inputs

Let’s say you have a form and you want to style only the email field.

<input type="text" placeholder="Your name" />
<input type="email" placeholder="Your email" />
<input type="password" placeholder="Your password" />

You can target just the email input like this:

input[type="email"] {
  border: 2px solid green; /* Green border for email field */
  padding: 5px;
}

This means:

“Select all <input> elements where type is exactly email.”

Hands-on example: Styling form inputs

Create a file attribute-equals.html and add:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Attribute Equals Selector</title>
  <style>
    /* Style only the email input */
    input[type="email"] {
      border: 2px solid green;
      padding: 6px;
      border-radius: 4px;
    }

    /* Style only the password input */
    input[type="password"] {
      border: 2px solid orange;
      padding: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h2>Sign Up</h2>
  <input type="text" placeholder="Your name" /><br><br>
  <input type="email" placeholder="Your email" /><br><br>
  <input type="password" placeholder="Your password" />
</body>
</html>

Open it in your browser. You’ll see:

Name field: normal border.
Email field: green border.
Password field: orange border.

You just used attribute selectors to style different elements without adding any extra classes.

More powerful patterns: `^`, `$`, and `*`

Sometimes you want to match part of an attribute’s value, not the whole thing. CSS gives you special symbols for that:

^= – starts with
$= – ends with
*= – contains

Let’s explore them with links.

1. Starts with: `[attribute^="value"]`

This selects elements where the attribute value starts with something.

Example: Style all links that go to https URLs (secure links):

a[href^="https"] {
  color: darkgreen;      /* Secure links appear green */
  font-weight: bold;
}

This matches:

<a href="https://google.com">Secure link</a>

But not:

<a href="http://old-site.com">Not secure</a>

2. Ends with: `[attribute$="value"]`

This matches attributes where the value ends with something.

Example: Style all links to PDF files:

a[href$=".pdf"] {
  color: darkred;                /* PDFs appear dark red */
  text-decoration: underline;
}

This matches:

<a href="files/report.pdf">Download report</a>

3. Contains: `[attribute*="value"]`

This matches attributes where the value contains a piece of text anywhere inside.

Example: Style all links that go to YouTube:

a[href*="youtube.com"] {
  background-color: #ffeb3b; /* Yellow background */
  padding: 2px 4px;
}

This matches:

<a href="https://www.youtube.com/watch?v=123">Watch video</a>

Building a mini link-highlighting page

Let’s put these patterns together into one practical example.

Create a file called attribute-patterns.html and add:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Attribute Pattern Selectors</title>
  <style>
    /* 1. Links that open in a new tab */
    a[target="_blank"] {
      color: blue;
      font-style: italic;
    }

    /* 2. Secure links (https) */
    a[href^="https"] {
      border-bottom: 2px solid green;
    }

    /* 3. PDF links */
    a[href$=".pdf"] {
      color: darkred;
      font-weight: bold;
    }

    /* 4. YouTube links */
    a[href*="youtube.com"] {
      background-color: #fff3cd; /* light yellow */
      padding: 3px 5px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <h2>Useful Links</h2>

  <p>
    <a href="https://example.com" target="_blank">Secure site (new tab)</a>
  </p>
  <p>
    <a href="http://oldsite.com">Old site (not secure)</a>
  </p>
  <p>
    <a href="files/guide.pdf" target="_blank">Download PDF guide</a>
  </p>
  <p>
    <a href="https://www.youtube.com/watch?v=abc">Watch on YouTube</a>
  </p>
</body>
</html>

Open it in your browser and observe:

Secure https links have a green underline.
Links with target="_blank" are blue and italic.
PDF links are dark red and bold.
YouTube links have a light yellow background.

Try it yourself

Experiment by changing the href of one of the links. For example, remove .pdf from files/guide.pdf and refresh the page. Watch how the style changes. This is attribute selectors in action.

Using attribute selectors with forms

Forms are a perfect place to use attribute selectors, because inputs already have helpful attributes: type, required, placeholder, and more.

Example: Highlight required fields

Let’s say you want to visually highlight fields the user must fill in. In HTML, these often have the required attribute.

<input type="text" placeholder="Your name" required />
<input type="email" placeholder="Your email" />

You can style all required fields like this:

input[required] {
  border-left: 4px solid red;  /* Red bar to show it's required */
  padding-left: 6px;
}

Now any input with required will get the red bar, without needing a class like .required.

Full form example

Create attribute-forms.html with:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Attribute Selectors with Forms</title>
  <style>
    /* Style required fields */
    input[required] {
      border-left: 4px solid red;
      padding-left: 6px;
    }

    /* Style all text inputs */
    input[type="text"] {
      border: 1px solid #ccc;
      padding: 5px;
    }

    /* Style email inputs differently */
    input[type="email"] {
      border: 1px solid blue;
      padding: 5px;
    }
  </style>
</head>
<body>
  <h2>Contact Us</h2>
  <p>
    <input type="text" placeholder="Your name" required />
  </p>
  <p>
    <input type="email" placeholder="Your email" />
  </p>
  <p>
    <input type="text" placeholder="Subject" />
  </p>
</body>
</html>

Open it and notice:

Name field: red bar + gray border.
Email field: blue border.
Subject field: gray border, no red bar.

You just created a form that visually guides the user, using only attribute selectors.

Quick recap of key attribute selectors

Here’s a small cheat sheet you can refer to:

[attribute]          /* Has this attribute at all */
[attribute="x"]     /* Attribute equals value x */
[attribute^="x"]    /* Attribute starts with x */
[attribute$="x"]    /* Attribute ends with x */
[attribute*="x"]    /* Attribute contains x */

Examples:

a[target="_blank"] – links that open in a new tab
input[type="password"] – password fields
a[href$=".pdf"] – links to PDF files
a[href*="youtube"] – links that contain "youtube"

What’s next?

You’ve just taken a great step in learning how to use CSS attribute selectors. They help you:

Style elements without adding lots of extra classes
Target links, buttons, and form fields based on their purpose
Keep your HTML cleaner and your CSS more flexible

From here, you can:

Combine attribute selectors with classes (for example, .btn[href^="https"])
Explore other CSS selectors like pseudo-classes (:hover, :focus)
Practice by building a small form or link list and styling it only with attribute selectors

Learning CSS can feel like a lot at first, but every new selector you master is a real win. Keep experimenting, break things, fix them again—and you’ll be surprised how quickly your skills grow.

Mudzinga