CSS Attribute Selectors

Attribute selectors – used to select HTML elements based on the presence or value of their attributes.

Attribute Selectors

Attribute selectors are used to select HTML elements based on the presence or value of their attributes.

Instead of targeting elements only by tag, class, or ID, attribute selectors allow you to apply styles based on:

• Whether an attribute exists
• What value it has
• Whether its value contains a specific word, part, prefix, or suffix

These selectors begin and end with square brackets [ ].

Types of Attribute Selectors

1. [attribute] – Has Attribute Selector
2. [attribute =”value”] – Exact Value Selector
3. [attribute ~=”value”] – Whitespace Separated Value Selector
4. [attribute|=”value”] – Hyphen Separated (Prefix) Selector
5. [attribute^=”value”] – Begins With Selector
6. [attribute$=”value”] – Ends With Selector
7. [attribute*=”value”] – Contains Substring Selector
8. [attribute=”value” i] – Case-Insensitive Exact Match Selector

[attribute] – Has Attribute Selector

This selector selects any element that simply has a specific attribute, no matter what the value is.

Syntax:

[required] {
  border: 2px solid red;
}

<input type="text" required>    <!-- Selected -->
<input type="email">            <!-- Not selected -->

• This selector matches all elements that include the attribute, regardless of its value.
• In this case, it applies styles to any input that has required, even if required=”required” is not written explicitly.

[attribute=”value”] – Exact Value Match Selector

Selects elements where the attribute’s value matches exactly with the specified value.

Use this when you need to target elements that have a specific and exact value in their attribute.

When you want to style elements like:

• <input type=”text”>
• <a target=”_blank”>
• <button type=”submit”>

Syntax:

[type="text"] {
  background-color: yellow;
}

<input type="text">    <!-- Selected -->
<input type="email">   <!-- Not selected -->

• Only those elements will be selected where type is exactly equal to “text”.
• No partial matches, no extra characters allowed.

[attribute~=”value”] – Whitespace-Separated Word Selector

Selects elements where the attribute contains the given word, as a separate word, separated by spaces.

This is commonly used with the class attribute, where multiple class names are separated by spaces.

Use the tilde ~ symbol between attribute name and value to select.

Syntax:

[class~="highlight"] {
    color: blue;
}

<p class="highlight important">This paragraph is selected.</p>
<h1 class="important highlight">This heading is also selected.</h1>
<p class="highlightimportant">This paragraph is NOT selected.</p>

• Matches only when the word box appears as a separate word in the value of the class attribute.
• Will not match bigbox or textbox, because the word is not standalone.

[attribute|=”value”] – Hyphen-Separated Prefix Selector

Selects elements where the attribute is either:

1. Exactly equal to the given value, or
2. Begins with that value followed by a hyphen (-)

It is mostly used with lang attributes for language-specific styling.

Use the vertical bar | between the attribute name and value to select.

Syntax:

[lang|="en"]{
  color:red;
}

<p lang="en">Selected</p>
<p lang="en-US">Selected</p>
<p lang="en-GB">Selected</p>
<p lang="english">Not Selected</p>

• Will match if the attribute is “en” or starts with “en-“.
• It is perfect for language-specific formatting or localization-based styling.

[attribute^=”value”] – Starts With Selector

Selects elements where the attribute value starts with the given value.

Useful when you want to target all links or file paths that begin with a certain keyword, domain, or path prefix.

For things like:

• href that starts with https://
• src that starts with /images/
• data- attributes with known prefixes

Use the caret ^ symbol to select.

Syntax:

[href^="https"]{
  color:red;
}

<a href="https://example.com">Secure</a>   <!-- Selected -->
<a href="http://example.com">Not Secure</a> <!-- Not selected -->

• The selector looks at the beginning characters of the value.
• Only attributes that start with the exact characters provided will be selected.

[attribute$=”value”] – Ends With Selector

Selects elements where the attribute value ends with the given value.

Normally, Used to select files or resources based on file extensions or ending strings.

• Selecting images ending with .png, .jpg, etc.
• Links ending with .pdf, .zip

Use the dollar sign $ symbol to select.

Syntax:

[src$=".svg"]{
  border:5px solid red;
}

<img src="logo.svg">   <!-- Selected -->
<img src="logo.png">  <!-- Not selected -->

• Only values that end with .png will be matched.
• It is case-sensitive unless overridden.

[attribute*=”value”] – Contains Substring Selector

Selects elements where the attribute value contains the given substring, anywhere inside the value.

Useful for broad searches inside URLs, class names, or custom attributes.

• When you want to match part of a string
• Detect partial matches in values

Use the asterisk * symbol to select.

Syntax:

[href*="login"] {
  text-decoration: underline;
}

<a href="/user/login">Login</a>       <!-- Selected -->
<a href="/login-help">Help</a>        <!-- Selected -->
<a href="/dashboard">Not selected</a>

• It matches any attribute value that contains the substring “login”, no matter where it appears.
• It does not need to be a full word.

[attribute=”value” i] – Case-Insensitive Exact Match

Selects elements where the attribute value exactly matches, but it ignores case.

Use this when the attribute values may use uppercase or lowercase, but you want to match them all.

• User input fields
• File names with mixed casing
• Language codes, custom attributes

Add an i flag (for “ignore case”) after the value.

Syntax:

[type="Text" i] {
  background-color: lightblue;
}

<input type="text" placeholder="Selected">     <!-- Selected -->
<input type="TEXT" placeholder="Selected">     <!-- Selected -->
<input type="TeXt" placeholder="Selected">     <!-- Selected -->

• This selector tells the browser: “Match the value exactly, but don’t care about uppercase or lowercase.”
• It works only in CSS Selectors Level 4 and modern browsers.