CSS - Attribute Selectors

Previous
Quiz
Next

CSS Attribute Selectors is used to select HTML elements with specific attribute or value for attribute. Attribute selectors are enclosed in square brackets [ ] and can take various forms.

As below you can see how to select an HTML element based on attribute in CSS.

/* Selects all anchor tags having target attribute */
a[target] {
    color: green;
}

Attribute selector is type of selector in CSS. To know all the selector in CSS, check out CSS Selectors. article.

Table of Contents


 

CSS [attribute] Selector

This selector selects elements that have specified attribute, regardless of its value or type of element.

Syntax

[attribute]{
    property: value;
}

The below example uses data-toggle attribute which is a custom data attribute, learn more about data-* attribute.

Example

Following is an example to select all the HTML elements with a "data-toggle" attribute

<!DOCTYPE html>
<html>

<head>
    <style>
        [data-toggle] {
            background: lightgray;
            padding: 10px;
            color: black;
        }
    </style>
</head>

<body>
    <div data-toggle="yes">
        The div with data-toggle="yes" attribute
    </div>
    <div>
        The div without data-toggle attribute
    </div>
    <p data-toggle="no">
        A paragraph with data-toggle="no" attribute
    </p>
    <p>
        A paragraph without data-toggle attribute
    </p>
</body>

</html>

CSS [attribute="value"] Selector

This selector selects elements that have a specific attribute with a specific value.

Syntax

[attribute="value"]{
    property: value;
}

Example

This selector selects all elements with a 'data-toggle' attribute whose value is set to 'yes'.

<!DOCTYPE html>
<html>

<head>
    <style>
        [data-toggle="yes"] {
            background: lightgray;
            padding: 10px;
            color: black;
        }
    </style>
</head>

<body>
    <div data-toggle="yes">
        The div with data-toggle="yes" attribute
    </div>
    <div>
        The div without data-toggle attribute
    </div>
    <p data-toggle="no">
        A paragraph with data-toggle="no" attribute
    </p>
    <p>
        A paragraph without data-toggle attribute
    </p>
</body>

</html>

CSS [attribute*="value"] Selector

This selector selects elements that have a specific attribute with a value containing a specific substring.

Syntax

[attribute*="value"]{
    property: value;
}

Example

This selector selects all the elements with a "src" attribute which contain an "css" in the path:

<!DOCTYPE html>
<html>

<head>
    <style>
        img{
            height: 50px;
            width: 150px;
        }
        [src*="css"] {
            border: 2px solid;
        }
    </style>
</head>

<body>
    <p>
        Style applied to src attribute containing string 'css' in it
    </p>
    <img alt="Logo" src = "/css/images/logo.png" />
    <img alt="Logo" src = "/html/images/logo.png" />
</body>

</html>

CSS [attribute^="value"] Selector

This selector selects elements that have a specific attribute with a value that starts with a specific string.

Syntax

[attribute^="value"]{
    property: value;
}

Example

This selector selects all elements with a "href" attribute starting with "https://" 

<html>

<head>
    <style>
        [href^="https"] {
            background: lightgray;
            color:black;
        }
    </style>
</head>

<body>
    <a href="https://www.tutorialspoint.com">HTTPS Link</a> 
    <br> <br>
    <a href="http://www.tutorialspoint.com">HTTP Link</a>
</body>

</html>

CSS [attribute$="value"] Selector

This selector selects elements that have a specific attribute with a value that ends with a specific string.

Syntax

[attribute$="value"]{
    property: value;
}

Example

This selector selects all elements with a "src" attribute which ends with ".png"

<!DOCTYPE html>
<html>

<head>
    <style>
        img{
            height: 50px;
            width: 150px;
        }
        [src$=".png"] {
            border: 2px solid;
        }
    </style>
</head>

<body>
    <p>
        Style applied to src attribute's value ends with '.png'
    </p>
    <img alt="Logo" src = "/images/logo.jpg" />
    <img alt="Logo" src = "/html/images/logo.png" />
</body>

</html>

CSS [attribute|="value"] Selector

This selector select elements that have a specific attribute with a value that begins with a specified substring followed by a hyphen (-). This selector is often used for selecting elements with language-specific attributes, such as lang attributes, which often use hyphens to denote language sub-codes.

Syntax

[attribute|="value"]{
    property: value;
}

Example

This selector selects all the elements with a "lang" attribute that starts with "en" followed by a hyphen:

<html>

<head>
    <style>
        [lang|="en"] {
            background: lightgray;
            padding: 10px;
            color: black;
        }
    </style>
</head>

<body>
    <div lang="en"> This is a div in English! </div>
    <p lang="en-US"> This paragraph is in American English. </p>
    <p lang="en-GB"> This paragraph is in British English. </p>
    <div lang="fr"> Bonjour tout le monde en franais! </div>
    <div lang="es"> Hola Mundo en espaol! </div>
</body>

</html>

CSS [attribute~="value"] Selector

This selector is used to select elements that have a specific attribute with a value containing a specified word. The word should be a standalone word, surrounded by spaces or at the beginning or end of the attribute value.

Syntax

[attribute~="value"]{
    property: value;
}

Example

This selector select all elements with a "class" attribute containing the word "highlight"

<html>

<head>
    <style>
        [class~="highlight"] {
            background: yellow;
            padding: 10px;
            color: black;
        }
    </style>
</head>

<body>
    <div class="highlight"> 
        This is a highlighted div! 
    </div>
    <p class="highlight special"> 
        This paragraph is highlighted and special. 
    </p>
    <p class="special"> 
        This paragraph is special but not highlighted. 
    </p>
    <div class="note"> 
        This is just a note. 
    </div>
    <div class="highlight note"> 
        This note is highlighted. 
    </div>
</body>

</html>

Attribute Selectors For Inputs

Attribute selectors can be used to select input elements based on specific criteria, such as their type, name, value, or other attributes.

Example

<html>
<head>
    <style>
        /* Applies to all input tags */
        input {
            display: block;
            margin: 10px;
            padding: 5px;
        }
        /* Applies to input tags with type attribute */
        input[type] {
            border: 1px solid gray;
        }
        /* Applies to input tag with placeholder value as name */
        input[placeholder="name"] {
            border: 1px solid #f00;
        }
        /* Applies to input tags name attribute value start with "emailid" */
        input[name|="emailid"] {
            background-color: rgb(236, 178, 233);
        }
        /* Applies to input type attributes value containing "sub" string in it */
        input[type~="sub"] {
            background-color: rgb(88, 241, 88);
            padding: 10px;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="Username">
    <input type="text" placeholder="name">
    <input type="email" placeholder="Email" name="emailid">
    <input type="submit" placeholder="Submit">
</body>
</html>

Attribute Selectors For Language

You can use the lang attribute to select elements based on their language. The lang attribute specifies the language of the text contained within an element.

Example

<html>
<head>
    <style>
        div[lang] {
            color: red;
        }
        div[lang="fr"] {
            color: blue;
        }
        div[lang~="es"] {
            color: green;
        }
        div[lang|="de"] {
            color: orange;
        }
        div[lang^="it"] {
            color: purple;
        }
        div[lang$="ja"] {
            color: brown;
        }
        div[lang*="zh"] {
            color: teal;
        }
    </style>
</head>

<body>
    <div lang="en">Hello World in English!</div>
    <div lang="fr">Bonjour tout le monde en franais!</div>
    <div lang="es">Hola Mundo en espaol!</div>
    <div lang="ja"></div>
    <div lang="de">Hallo Welt auf Deutsch!</div>
    <div lang="it">Ciao Mondo in italiano!</div>
    <div lang="zh"></div>
</body>
</html>

CSS Multiple Attribute Selectors

CSS multiple attribute selectors allow you to select elements based on multiple attribute values. It is use to target specific element that meet multiple criteria.

Example

<html>
<head>
<style>
    /* Remove bullet points from list items */
    ul {
        list-style: none;
    }

    /* Target all anchor elements with an href attribute */
    a[href] {
        color: rgb(231, 11, 194);
    }

    /* Target anchor elements with both specific href values and file extension */
    a[href="css_backgrounds.htm"][href$=".htm"] {
        background-color: lightgray;
        padding: 5px;
    }

    /* Target anchor elements with a specific href value */
    a[href="css_colors.htm"] {
        color: rgb(51, 255, 0);
    }
</style>
</head>

<body>
    <ul>
        <li><a href="css_text.htm">
            CSS Text
        </a></li>
        <li><a href="css_backgrounds.htm">
            CSS Background
        </a></li>
        <li><a href="css_colors.htm">
            CSS Color
        </a></li>
    </ul>
</body>

</html>
To know more about other selectors please check ths CSS Slectors article.
Print Page
Previous
Next
Advertisements