CSS Attribute Selectors

CSS Attribute Selectors target elements based on their attributes instead of using classes or IDs. They are especially useful when styling links, form controls, images, and custom HTML attributes.

Why Use Attribute Selectors?

• Select elements without adding extra classes.
• Write cleaner and reusable CSS.
• Style elements based on attribute values.
• Improve code maintainability.
• Useful for forms, links, and responsive designs.

a[href]{

    color:blue;

}

An attribute selector selects HTML elements that have a specific attribute or a particular attribute value.

selector[attribute]{

    property:value;

}

The [attribute] selector selects every element that contains the specified attribute, regardless of its value.

a[href]{

    color:red;

}

img[alt]{

    border:2px solid green;

}

The [attribute="value"] selector selects elements whose attribute exactly matches the specified value.

input[type="text"]{

    border:2px solid blue;

}

a[target="_blank"]{

    color:green;

}

The [attribute~="value"] selector selects elements whose attribute value contains the specified word. The words must be separated by spaces.

p[class~="intro"]{

    color:purple;

}

div[class~="box"]{

    border:2px solid red;

}

The [attribute|="value"] selector selects elements whose attribute value is exactly the specified value or begins with that value followed by a hyphen (-).

p[lang|="en"]{

    color:blue;

}

Example HTML:

<p lang="en">English</p>

<p lang="en-US">American English</p>

<p lang="fr">French</p>

These selectors match attribute values based on the beginning, ending, or occurrence of a specific string.

a[href^="https"]{

    color:green;

}

img[src$=".png"]{

    border:2px solid blue;

}

a[href*="google"]{

    font-weight:bold;

}

Example 1 : Style External Links

a[target="_blank"]{

    color:red;

}

Example 2 : Style Required Inputs

input[required]{

    border:2px solid red;

}

Example 3 : Highlight PDF Links

a[href$=".pdf"]{

    color:purple;

}

Example 4 : Style Secure Websites

a[href^="https"]{

    color:green;

}

• Select elements without extra classes or IDs.
• Create cleaner HTML code.
• Reduce duplicate CSS.
• Style elements dynamically.
• Useful for forms and hyperlinks.
• Easy to maintain large websites.
• Improve CSS readability.

input[required]{

    border:2px solid red;

}

a[href^="https"]{

    color:green;

}

img[src$=".jpg"]{

    border-radius:10px;

}

Following best practices helps you write cleaner, maintainable, and efficient CSS using attribute selectors.

• Use attribute selectors only when necessary.
• Avoid long and overly specific selectors.
• Use classes for repeated styling patterns.
• Use attribute selectors for forms and links.
• Keep selectors readable and organized.
• Combine attribute selectors with other selectors carefully.
• Test selectors after changing HTML attributes.
• Keep your CSS simple and maintainable.

❌ Poor

div[class*="box"][data-id][title]{

    color:red;

}

✔ Better

.box{

    color:red;

}

CSS Attribute Selectors are supported by all modern web browsers.

1. What is a CSS Attribute Selector?
2. Why are attribute selectors useful?
3. What is the difference between [attribute] and [attribute="value"]?
4. What does the ~= operator do?
5. What is the purpose of the |= operator?
6. When would you use the ^= selector?
7. What does the $= selector match?
8. How does the *= selector work?
9. Can attribute selectors be combined with other selectors?
10. Are CSS Attribute Selectors supported in modern browsers?

In this lesson, you learned:

• ✔ Introduction to CSS Attribute Selectors.
• ✔ Different types of attribute selectors.
• ✔ [attribute] selector.
• ✔ [attribute="value"] selector.
• ✔ [attribute~="value"] selector.
• ✔ [attribute|="value"] selector.
• ✔ [attribute^="value"], [attribute$="value"], and [attribute*="value"].
• ✔ Practical examples.
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.