Home 〉 CSS Tutorials 〉 CSS Attribute Selectors Explained with Examples | Beginner Friendly Guide

CSS Attribute Selectors Explained with Examples | Beginner Friendly Guide !

CSS Attribute Selectors Explained with Examples | Beginner Friendly Guide !

How can you style elements based on their attributes? Attribute selectors in CSS let you target elements with specific `href`, `type`, `value`, or even partial matches. This is perfect for forms, links, and dynamically generated content.

Introduction

In CSS, attribute selectors allow you to apply styles to HTML elements based on the presence or value of their attributes. These selectors give you more control and flexibility in your stylesheets, especially when classes or IDs are not available.

Note: We have already covered other CSS selectors in our blog “CSS Syntax and Selectors Explained with Examples | Beginners Guide.”

In this Tutorial, we are going to cover the following CSS 'attribute selector' properties:

  1. '[attribute]'
  2. '[attribute="value"]'
  3. '[attribute~="value"]'
  4. '[attribute|="value"]'
  5. '[attribute^="value"]'
  6. '[attribute$="value"]'
  7. '[attribute*="value"]'

What is a CSS Attribute Selector?

CSS attribute selectors match elements that have a specific attribute or attribute value.

Basic Syntax:

Syntax ✍

element[attribute] {
/* CSS styles here */
}

Types of CSS Attribute Selectors

1. '[attribute]' - Select elements with an attribute

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

label[id] {
background-color: yellow;
}

</style>
</head>
<body>

<label id="label">This is a Lable Tag</label> <br>
<label>This is a Lable Tag</label> <br>
<label class="label">This is a Lable Tag</label> <br>

</body>
</html>

output 📌




Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This selects all label elements that have the 'id' attribute.

2. '[attribute="value"]' - Exact match

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>

p[class='para1'] {
background-color: yellow;
}

</style>
</head>
<body>

<p class="para1">This is a Paragraph</p>
<p class="para1 ">This is a Paragraph</p>
<p class="para1 para2">This is a Paragraph</p>
<p class="para2">This is a Paragraph</p>

</body>
</html>

output 📌

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This applies styles to all paragraph tags that 'para1' attribute.

3. '[attribute~="value"]' - Match one word (space-separated values)

Code : 3 📝

<!DOCTYPE html>
<html>
<head>
<style>

p[class~='para3'] {
background-color: yellow;
}

</style>
</head>
<body>

<p class="para3 para4">This is a Paragraph</p>
<p class="para4 para3">This is a Paragraph</p>
<p class="para4 para3 ">This is a Paragraph</p>
<p class="para4para3">This is a Paragraph</p>
<p class="para3para4">This is a Paragraph</p>

</body>
</html>

output 📌

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Matches if the class attribute contains the word “para3 ” as one of its space-separated values. The value should have space.

4. '[attribute|="value"]' - Match value or value- (useful for language codes)

Code : 4 📝

<!DOCTYPE html>
<html>
<head>
<style>

p[lang|='en'] {
background-color: yellow;
}

</style>
</head>
<body>

<p lang="en-US">This is a Paragraph</p>
<p lang="enUS">This is a Paragraph</p>
<p lang="US-en">This is a Paragraph</p>

</body>
</html>

output 📌

This is a Paragraph

This is a Paragraph

This is a Paragraph

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Targets all paragraphs where 'lang' is 'en' or starts with 'en-', like 'en-US'. The value should end with 'hypen'.

5. '[attribute^="value"]' - Starts with value

Code : 5 📝

<!DOCTYPE html>
<html>
<head>
<style>

p[class^='para5'] {
background-color: yellow;
}

</style>
</head>
<body>

<p class="para5 para6">This is a Paragraph</p>
<p class="para5para6">This is a Paragraph</p>
<p class="para5-para6">This is a Paragraph</p>
<p class="para0para5para6">This is a Paragraph</p>

</body>
</html>

output 📌

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Selects paragraphs whose 'class' starts with "para5".

6. '[attribute$="value"]' - Ends with value

Code : 6 📝

<!DOCTYPE html>
<html>
<head>
<style>

p[class$='para8'] {
background-color: yellow;
}

</style>
</head>
<body>

<p class="para7-para8">This is a Paragraph</p>
<p class="para7para8">This is a Paragraph</p>
<p class="para7 para8">This is a Paragraph</p>
<p class="para7 para8 para0">This is a Paragraph</p>
<p class="para8para7">This is a Paragraph</p>

</body>
</html>

output 📌

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Styles links that end with '.pdf', indicating downloadable PDF files.

7. '[attribute*="value"]' - Contains value

Code : 7 📝

<!DOCTYPE html>
<html>
<head>
<style>

p[class*='para10'] {
background-color: yellow;
}

</style>
</head>
<body>

<p class="para10">This is a Paragraph</p>
<p class="para10 ">This is a Paragraph</p>
<p class="para10 para11">This is a Paragraph</p>
<p class="para9 para10">This is a Paragraph</p>
<p class="para9para10">This is a Paragraph</p>
<p class="para9para10para11">This is a Paragraph</p>
<p class="para9 para10 para11">This is a Paragraph</p>
<p class="para9 para11">This is a Paragraph</p>

</body>
</html>

output 📌

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is a Paragraph

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Matches if the class name contains the substring “para10” anywhere.

Example Code (HTML + CSS)

Code : 8 📝

<!DOCTYPE html>
<html>
<head>
<style>

a[href$=".txt"] {
color: red;
text-decoration: underline;
}
input[required] {
border: 2px dashed orange;
}

</style>
</head>
<body>

</style>
<body>
<a href="/images/text.txt">Download TXT File</a><br> <br>
<a href="/images/text.pdf">Download PDF File</a> <br> <br> <br>
<form>
<input type="text" required placeholder="Required Field"> <br> <br>
<input type="text" placeholder="Optional Field">
</form>

</body>
</html>

output 📌

Download TXT File

Download PDF File




Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This example highlights links ending in '.txt' and 'input' fields with the 'required' attribute.

Please Note :
  • The href text file '/images/text.txt' is used because the text file is located in the 'images' folder.
  • If your text file is in the same folder as your HTML file, you can simply use 'text.txt' as the href value.
  • For more information on file paths, check our complete blog post on 'file path'.

Conclusion

CSS attribute selectors are powerful tools to target HTML elements based on their attributes. They help you write more specific, clean, and efficient styles without relying solely on classes or IDs.

Start using them in your projects to create smarter and more dynamic CSS!

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What are attribute selectors in CSS?

Attribute selectors allow you to select HTML elements based on the presence or value of an attribute.

Can I use attribute selectors with classes?

Yes! You can use '[class*="value"]', '[class~="value"]', and other forms to match class names.

Are attribute selectors supported in all browsers?

Yes, all modern browsers support CSS attribute selectors.

When should I use attribute selectors?

Use them when you want to style elements based on dynamic attributes like 'href', 'type', 'src', etc.

Previous Post Next Post