Table of contents
1.
Introduction
2.
Description  
2.1.
How Do Attribute Selectors Work?  
2.2.
Why Are Attribute Selectors Useful?  
3.
Syntax  
3.1.
1. Targeting Elements with a Specific Attribute  
3.2.
2. Targeting Elements with a Specific Attribute Value  
3.3.
3. Targeting Elements with Attribute Values Containing a Specific Word  
3.4.
4. Targeting Elements with Attribute Values Starting or Ending with a Specific String  
3.5.
5. Targeting Elements with Attribute Values Containing a Specific Substring  
4.
Types of CSS Attribute Selectors
4.1.
1. [attribute] Selector
4.1.1.
Syntax:
4.1.2.
Example:
4.2.
2. [attribute="value"] Selector
4.2.1.
Syntax:
4.2.2.
Example:
4.3.
3. [attribute~="value"] Selector
4.3.1.
Syntax:
4.3.2.
Example:
4.4.
4. [attribute|="value"] Selector
4.4.1.
Syntax:
4.4.2.
Example:
4.5.
5. [attribute^="value"] Selector
4.5.1.
Syntax:
4.5.2.
Example:
4.6.
6. [attribute$="value"] Selector
4.6.1.
Syntax
4.6.2.
Example
4.7.
7. [attribute*="value"] Selector
4.7.1.
Syntax
4.7.2.
Example
5.
Combining Attribute Selectors
5.1.
Example
6.
Practical Examples  
6.1.
Example 1: Styling External Links  
6.2.
Example 2: Styling Specific File Types  
6.3.
Example 3: Styling Form Inputs Based on Type  
6.4.
Example 4: Targeting Elements with Specific Data Attributes  
7.
Practical Use Cases
8.
Frequently Asked Questions
8.1.
What are CSS attribute selectors used for? 
8.2.
Can I combine multiple attribute selectors?
8.3.
Are attribute selectors supported in all browsers? 
9.
Conclusion
Last Updated: Jan 26, 2025
Easy

CSS Attribute Selectors

Author Pallavi singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

CSS Attribute Selectors allow developers to apply styles to HTML elements based on the presence and value of their attributes. This powerful feature makes it easier to target specific elements dynamically and maintain cleaner code. 

CSS Attribute Selectors

In this article, we will discuss different types of CSS attribute selectors, their syntax, and practical use cases, complete with examples and code outputs.

Description  

CSS Attribute Selectors are a powerful way to style HTML elements based on their attributes or attribute values. They allow you to apply styles without needing to add extra classes or IDs to your HTML. This makes your code cleaner & more efficient.  

Let’s understand how they work & why they are useful:  

How Do Attribute Selectors Work?  

Attribute Selectors work by matching elements that have specific attributes or attribute values. For example, you can target all `<a>` tags with a `target` attribute or all `<input>` elements with `type="text"`. This gives you more control over how your styles are applied.  

Why Are Attribute Selectors Useful?  

1. No Need for Extra Classes or IDs: You don’t have to add extra classes or IDs to your HTML to style specific elements. This keeps your HTML clean & semantic.  
 

2. Precise Targeting: You can target elements based on specific conditions, like attribute values or patterns.  
 

3. Dynamic Styling: Attribute Selectors are especially useful when working with dynamic content, like forms or links, where attributes might change based on user input or backend data.  

Syntax  

The syntax for CSS Attribute Selectors is very easy. It allows you to target HTML elements based on their attributes or attribute values. The general structure looks like this:  

element[attribute] {
  / styles /
}


Here, `element` is the HTML tag (like `a`, `img`, `input`, etc.), & `attribute` is the name of the attribute you want to target (like `href`, `src`, `type`, etc.).  

Let’s understand in detail with examples:  

1. Targeting Elements with a Specific Attribute  

You can style elements that have a specific attribute, regardless of its value. For example, if you want to style all `<a>` tags that have a `target` attribute:  

a[target] {
  color: red;
  text-decoration: none;
}


This will apply red color & remove underline from all links that have a `target` attribute, like:  

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

2. Targeting Elements with a Specific Attribute Value  

You can also style elements based on the exact value of an attribute. For example, styling all `<input>` elements with `type="text"`:  

input[type="text"] {
  background-color: lightblue;
  border: 1px solid blue;
}


This will apply a light blue background & blue border to all text input fields:  

<input type="text" placeholder="Enter your name">

3. Targeting Elements with Attribute Values Containing a Specific Word  

Sometimes, you might want to target elements where the attribute value contains a specific word. For example, styling all images with `alt` text containing the word "logo":  

img[alt~="logo"] {
  border: 2px solid green;
}


This will add a green border to images like:  

<img src="logo.png" alt="company logo">

4. Targeting Elements with Attribute Values Starting or Ending with a Specific String  

You can also target elements where the attribute value starts or ends with a specific string. For example, styling all links with `href` starting with "https":  

a[href^="https"] {
  font-weight: bold;
}


This will make all secure links bold:  

<a href="https://example.com">Secure Link</a>


Similarly, you can target elements where the attribute value ends with a specific string. For example, styling all images with `src` ending in ".png":  

img[src$=".png"] {
  opacity: 0.8;
}


This will reduce the opacity of all PNG images:  

<img src="image.png" alt="Sample Image">

5. Targeting Elements with Attribute Values Containing a Specific Substring  

You can even target elements where the attribute value contains a specific substring. For example, styling all links with `href` containing "example":  

a[href="example"] {
  color: purple;
}


This will change the color of all links containing "example" in their URL:  

<a href="https://example.com">Example Link</a>

Types of CSS Attribute Selectors

1. [attribute] Selector

The [attribute] selector targets elements that have a specific attribute, regardless of its value.

Syntax:

[attribute] {
    /* CSS styles */
}

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        [type] {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Enter text">
    <input type="password" placeholder="Enter password">
</body>
</html>

Output: 

Output

All input elements with a type attribute will have blue text in bold.

2. [attribute="value"] Selector

This selector targets elements with an attribute set to a specific value.

Syntax:

[attribute="value"] {
    /* CSS styles */
}

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        [type="text"] {
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Enter text">
    <input type="password" placeholder="Enter password">
</body>
</html>

Output: 

Output

Only the input element with type="text" will have a green border.

3. [attribute~="value"] Selector

This selector matches elements with an attribute containing a word exactly matching the specified value.

Syntax:

[attribute~="value"] {
    /* CSS styles */
}

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        [class~="highlight"] {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="highlight">This paragraph is highlighted.</p>
    <p class="normal">This paragraph is normal.</p>
</body>
</html>


Output: 

Output

The first paragraph will have a yellow background.

4. [attribute|="value"] Selector

This selector matches elements with an attribute value that starts with the specified value and is followed by a hyphen.

Syntax:

[attribute|="value"] {
    /* CSS styles */
}

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        [lang|="en"] {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p lang="en">This text is in English.</p>
    <p lang="en-us">This text is in US English.</p>
    <p lang="fr">This text is in French.</p>
</body>
</html>


Output: 

Output

The first two paragraphs will have italicized text.

5. [attribute^="value"] Selector

This selector targets elements with an attribute value starting with a specific string.

Syntax:

[attribute^="value"] {
    /* CSS styles */
}

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        [href^="https"] {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Secure Link</a>
    <a href="http://example.com">Insecure Link</a>
</body>
</html>


Output: 

Output

Only the secure link will be underlined.

6. [attribute$="value"] Selector

This selector matches elements with an attribute value ending with a specific string.

Syntax

[attribute$="value"] {
    /* CSS styles */
}

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        [src$=".jpg"] {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <img src="image.jpg" alt="Image">
    <img src="image.png" alt="Image">
</body>
</html>


Output: 

Output

Only the .jpg image will have a red border.

7. [attribute*="value"] Selector

This selector targets elements whose attribute value contains a specific substring.

Syntax

[attribute*="value"] {
    /* CSS styles */
}

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        [title*="tooltip"] {
            color: purple;
        }
    </style>
</head>
<body>
    <p title="tooltip-example">This is a tooltip example.</p>
    <p title="example">This is just an example.</p>
</body>
</html>


Output: 

Output

The first paragraph will have purple text.

Combining Attribute Selectors

You can combine multiple attribute selectors to target elements more specifically.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        input[type="text"][placeholder*="name"] {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Enter your name">
    <input type="text" placeholder="Enter your email">
</body>
</html>


Output: 

Output

Only the input field with a placeholder containing "name" will have a light blue background.

Practical Examples  

Let’s look at some practical examples to understand how Attribute Selectors can be used in real-world scenarios:  

Example 1: Styling External Links  

Suppose you want to style all external links (links that start with "http" or "https") differently from internal links. You can use the `^=` operator to target links with `href` starting with "http":  

a[href^="http"] {
  color: orange;
  text-decoration: underline;
}


This will style all external links like this:  

<a href="https://example.com">External Link</a>
<a href="/about">Internal Link</a>

Example 2: Styling Specific File Types  

If you have a list of download links & want to style PDF links differently, you can use the `$=` operator to target links ending with ".pdf":  

a[href$=".pdf"] {
  color: red;
  font-weight: bold;
}


This will style all PDF links like this:  

<a href="document.pdf">Download PDF</a>
<a href="image.png">Download Image</a>

Example 3: Styling Form Inputs Based on Type  

You can style different types of form inputs using Attribute Selectors. For example, styling text inputs & password inputs differently:  

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

input[type="password"] {
  background-color: lightpink;
}


This will apply different background colors to text & password inputs:  

<input type="text" placeholder="Username">
<input type="password" placeholder="Password">

Example 4: Targeting Elements with Specific Data Attributes  

If you’re using custom data attributes (like `data-`), you can target them using Attribute Selectors. For example, styling elements with a `data-status` attribute:  

div[data-status="active"] {
  background-color: lightgreen;
}
div[data-status="inactive"] {
  background-color: lightgray;
}


This will style elements based on their `data-status` value:  

<div data-status="active">Active Item</div>
<div data-status="inactive">Inactive Item</div>

Practical Use Cases

  1. Dynamic Styling: Use attribute selectors to style form fields dynamically based on attributes like type, placeholder, or value.
     
  2. Responsive Design: Target elements for specific languages using lang attributes.
     
  3. Accessibility: Style elements with aria- attributes to enhance accessibility.
     
  4. Data Attributes: Leverage data-* attributes to apply styles to elements in a structured manner.

Frequently Asked Questions

What are CSS attribute selectors used for? 

CSS attribute selectors are used to style HTML elements based on the presence, value, or pattern of attributes. They help in writing precise and efficient CSS.

Can I combine multiple attribute selectors?

Yes, you can combine multiple attribute selectors to target elements more specifically, making your CSS more powerful and dynamic.

Are attribute selectors supported in all browsers? 

Most modern browsers support CSS attribute selectors. However, it is always recommended to test your styles for compatibility.

Conclusion

CSS attribute selectors provide a powerful way to target and style HTML elements based on their attributes. By mastering these selectors, you can write more dynamic and flexible CSS code. This article covered various attribute selectors, their syntax, examples, and practical applications to help you enhance your web development skills.

Live masterclass