CSS Attribute Selector

Attribute selectors in CSS allow you to target elements based on the presence or value of certain attributes.

Here are a few examples of attribute selectors and how they can be used for element manipulation

Attribute Exists Selector

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

        
            a[href] {
    color: blue;
}
        
    

In this example, the attribute selector a[href] targets all <a> elements that have the href attribute. It sets the text color of those links to blue. The second <a> element without the href attribute is not affected.

Attribute Value Selector

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

        
            input[type="text"] {
    border: 1px solid black;
}
        
    

Here, the attribute selector input[type="text"] targets <input> elements with the type attribute set to "text". It adds a black border to those input fields.

The second input field with the type attribute set to "email" is not affected.

Attribute Value Starts With Selector

        
            <img src="/images/common/cutecat.png" alt="Cat Image">
<img src="/images/common/cutedog_100x100.png" alt="Dog Image">
        
    

        
            img[src^="images/"] {
    width: 200px;
}
        
    

In this example, the attribute selector img[src^="images/"] targets <img> elements with the src attribute that starts with "images/".

Attribute Value Ends With Selector

        
            <a href="https://www.example.com">External Link</a>
<a href="/contact">Contact Us</a>
        
    

        
            a[href$=".com"] {
   color: green;
}
        
    

In this example, the attribute selector a[href$=".com"] targets <a> elements with the href attribute that ends with ".com".

It sets the text color of those links to green. Only the first link matches the selector.

Attribute Value Contains Selector

        
            <span class="tag">CSS</span>
<span class="tag">HTML</span>
<span class="tag">JavaScript</span>
        
    

        
            span[class*="t"] {
   background-color: yellow;
}
        
    

Here, the attribute selector span[class*="t"] targets <span> elements with the class attribute that contains the letter "t".

It sets the background color of those spans to yellow. All three spans match the selector.

Attribute Value Contains Word Selector

        
            <input type="checkbox" id="check1">
<input type="checkbox" id="check2">
        
    

        
            input[type~="checkbox"] {
   margin-right: 10px;
}
        
    

In this example, the attribute selector input[type~="checkbox"] targets <input> elements with the type attribute that contains the word "checkbox". It adds a right margin of 10 pixels to those checkboxes. Both checkboxes match the selector.

These additional examples demonstrate different use cases of attribute selectors, including targeting elements with attribute values that start with, end with, contain, or contain specific words. Attribute selectors provide flexibility in selecting elements based on various attribute conditions, allowing you to style and manipulate them accordingly.