CSS Attribute Selector

t rfv31q4hzujzThe CSS selector is usually used to apply a style to HTML elements using classes and IDs. However, you can also use different selectors on different attributes of HTML elements. In this chapter, you will learn about how to implement CSS attribute selectors.

What Is an Attribute Selector?

The attribute selector of CSS is a particular type of selector that is implemented to select the HTML elements with a specific attribute and/or attribute(s) having any specified value associated with it. CSS's attribute selectors allow the designer to create an effortless yet influential mode of applying the styles on various HTML elements depending on the occurrence of any specific attribute or its value. An attribute selector can be created by placing the attribute — (not obligatory) with a value — within the square brackets ([….]). Its syntax also allows you to put an element type selector before it.

Styling a specific HTML element based on an attribute or attribute value can be classified into the following syntax:
  • What Is an Attribute Selector?
    • CSS [attribute] Selector
    • CSS [attribute="value"] Selector
    • CSS [attribute~="value"] Selector
    • CSS [attribute|="value"] Selector
    • CSS [attribute^="value"] Selector
    • CSS [attribute$="value"] Selector
    • CSS [attribute*="value"] Selector

Let's implement them one by one:

CSS [attribute] Selector

This form of attribute selector is implemented for choosing all of its elements which have the particular attribute, where it applies the CSS property for that attribute.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            a[target] {
                background-color: pink;
            }
        </style>
    </head>

    <body>
        <p>The color of the anchor link background becomes pink, where the target attribute will be.</p>
        <p><a href="#">Click here</a></p>
        <p><a href="#" target="_blank">W3schools.in</a></p>
    </body>

</html>

CSS [attribute="value"] Selector

This selector chooses the HTML element having a specific attribute and value.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            a[target=_top] {
                background-color: pink;
            }
        </style>
    </head>

    <body>
        <p>The color of the anchor link background becomes pink, where the target attribute will be _top.</p>
        <p><a href="https://www.w3schools.in/" target="_top">W3schools</a></p>
        <p><a href="#" target="_blank">W3schools.in</a></p>
    </body>

</html>

CSS [attribute~="value"] Selector

This attribute selector chooses all the elements with an attribute value as a list of space-separated values or a specific word.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            #container {
                margin: auto;
                width: 150px;
                border: 1px solid #bebbbb;
                text-align: center;
                border-radius: 10px;
            }
            
            [title~=author_pic] {
                width: 120px;
                border-radius: 50%;
                box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
            }
            
            [title~=author_name] {
                font-weight: 600;
                font-family: Verdana, sans-serif;
                color: navy;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <p><img src="https://i.pravatar.cc/300" title="author_pic"></p>
            <p title="author_name">Example Name</p>
        </div>
    </body>

</html>

CSS [attribute|="value"] Selector

This attribute selector is implemented for choosing elements having a specified attribute that starts with the particular value.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            [class|=tech] {
                background: pink;
            }
        </style>
    </head>

    <body>
        <h2 class="tech-writer">Technical Writer</h2>
        <p class="tech-developer">Technical Developer</p>
        <p class="technogeek">Techno Geek</p>
    </body>

</html>

CSS [attribute^="value"] Selector

This selector is implemented for choosing elements that have their attribute value starts with a particular value.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            [class^=tech] {
                background: pink;
            }
        </style>
    </head>

    <body>
        <h2 class="tech-writer">Technical Writer</h2>
        <p class="tech-developer">Technical Developer</p>
        <p class="technogeek">TechnoGeek</p>
    </body>

</html>

CSS [attribute$="value"] Selector

This type of attribute selector is implemented for choosing elements that have attribute value ending with a specific value.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            [class$="tech"] {
                background: pink;
            }
        </style>
    </head>

    <body>
        <div class=" first_tech">This is sample text.</div>
        <div class="info">Second data with no tech word in the end.</div>
        <div class="fin-tech">Technology with Finance.</div>
        <p class="Biotech">Biology with Technology.</p>
    </body>

</html>

CSS [attribute*="value"] Selector

This type of attribute selector is implemented for choosing elements having attribute value containing a specified value.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            [class*="in"] {
                background: pink;
            }
        </style>
    </head>

    <body>
        <div class="first_tech">This is sample text.</div>
        <div class="info">This is sample text.</div>
        <div class="fin-tech">Technology with Finance.</div>
        <p class="Biotech">Biology with Technology.</p>
    </body>

</html>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram