Attribute Selectors in CSS

CSS attribute selectors allow you to style HTML elements based on their attributes and attribute values. These selectors are particularly useful when you want to apply styles to elements that have specific attributes, regardless of their position in the document or their classes and IDs.

Basic Syntax

The basic syntax of an attribute selector is

element[attribute] {
  /* CSS properties */
}

This selector targets all elements of the specified type that have the given attribute, regardless of the attribute's value.

Types of Attribute Selectors

There are several types of attribute selectors you can use depending on your needs:

1. [attribute]: Selects elements with the specified attribute, regardless of its value.
2. [attribute="value"]: Selects elements with an attribute that matches exactly the given value.
3. [attribute~="value"]: Selects elements with an attribute whose value is a space-separated list, one of which matches exactly the given value.
4. [attribute|="value"]: Selects elements with an attribute whose value is a hyphen-separated list, starting with the given value.
5. [attribute^="value"]: Selects elements with an attribute whose value starts with the given value.
6. [attribute$="value"]: Selects elements with an attribute whose value ends with the given value.
7. *[attribute="value"]**: Selects elements with an attribute whose value contains the given value as a substring.

Examples

1. Selecting Elements with a Specific Attribute
   This example selects all <a> (anchor) elements that have the target attribute, regardless of the attribute's value.

   <style>
   a[target] {
     color: blue;
   }
   </style>
   <a href="https://www.djangoproject.in" target="_blank">Open in New Tab</a>
   <a href="https://www.djangoproject.in">Regular Link</a>

   Only the first link will be blue because it has a target attribute.

2. Selecting Elements with a Specific Attribute Value
   This example selects all <input> elements of type text 

   <style>
   input[type="text"] {
     border: 1px solid #000;
   }
   </style>
   <input type="text" name="username">
   <input type="password" name="password">
   

   Only the text input will have a border.

3. Selecting Elements with a Space-Separated Attribute Value
   This example selects all elements with a class attribute that includes the word "primary". 

   <style>
   [class~="primary"] {
     background-color: yellow;
   }
   </style>
   <div class="btn primary large">Button</div>
   <div class="btn secondary">Button</div>
   

   The first <div> will have a yellow background because it includes "primary" in its class list.

4. Selecting Elements with a Hyphen-Separated Attribute Value
   This example selects elements with a lang attribute that starts with "en". 

   <style>
   [lang|="en"] {
     font-style: italic;
   }
   </style>
   <p lang="en-us">This is American English.</p>
   <p lang="en-gb">This is British English.</p>
   <p lang="fr">This is French.</p>
   

   The first two paragraphs will be italicized.

5. Selecting Elements with an Attribute Value Starting with a Specific String
   This example selects <a> elements with an href attribute that starts with "https". 

   <style>
   a[href^="https"] {
     text-decoration: underline;
   }
   </style>
   <a href="https://www.djangoproject.in">Secure Link</a>
   <a href="http://www.djangoproject.in">Non-Secure Link</a>
   

   Only the first link will be underlined.

6. Selecting Elements with an Attribute Value Ending with a Specific String
   This example selects <img> elements with a src attribute that ends in ".jpg". 

   <style>
   img[src$=".jpg"] {
     border-radius: 10px;
   }
   </style>
   <img src="image1.jpg">
   <img src="image2.png">
   

   Only the first image will have rounded corners.

7. Selecting Elements with an Attribute Value Containing a Specific Substring
   This example selects <a> elements with an href attribute that contains the word "docs". 

   <style>
   a[href*="css"] {
     font-weight: bold;
   }
   </style>
   <a href="https://www.djangoproject.in/css/what-is-css/">Documentation</a>
   <a href="https://www.djangoproject.in/about-us/">About Us</a>
   

   The link to the documentation will be bold.

Practical Use Cases

Form Styling: Easily target specific form elements by their type, name, or other attributes.

Responsive Design: Apply styles based on data attributes or other custom attributes.

Custom Components: Style elements based on unique identifiers or status attributes.