CSS Attribute Selectors

  • The Attribute selectors select elements based on an attribute or attribute value.

    [attribute]

    • This selector is used to select elements with a specified attribute.

    Note:</b>For[<i>Attribute</i>]to work in IEB and earlier,DOCTYPE must be declared

    Example
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    a[target]{
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <p>The link with a target attribute gets a yellow background:</p>
    <a href="https://www.youtube.com/c/nielitbhu">NIELITBHU</a><br>
    <a href="https://www.sarkariresult.com" target="_blank">sarkariresult.com</a><br>
    <a href="https://www.wikipedia.org" target="_top">wikipedia.org</a><br>
    <a href="https://www.google.com" target="_top">google</a><br>
    <p><b>Note:</b>For[<i>Attribute</i>]to work in IEB and earlier,DOCTYPE must be declared</p>
    </body>
    </html>

    [attribute=”value”]

    • This selector is used to select elements with a specified attribute and value.

    Note:</b>For[<i>Attribute</i>]to work in IEB and earlier,DOCTYPE must be declared

    Example
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    a[target=_blank]{
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <p>The link with a target attribute gets a yellow background:</p>
    <a href="https://www.youtube.com/c/nielitbhu">NIELITBHU</a><br>
    <a href="https://www.sarkariresult.com" target="_blank">sarkariresult.com</a><br>
    <a href="https://www.wikipedia.org" target="_top">wikipedia.org</a><br>
    <a href="https://www.google.com" target="_blank">google</a><br>
    <p><b>Note:</b>For[<i>Attribute</i>]to work in IEB and earlier,DOCTYPE must be declared</p>
    </body>
    </html>

    [attribute~=”value”]

    • This selector is used to select elements with an attribute value containing a specified word.
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    [title~=image] {
    border: 5px solid blue;
    }
    </style>
    </head>
    <body>
    <h2>CSS [attribute~="value"] selector</h2>
    <img src="https://nielitbhu.com/image.jpg" title="image" width="250" height="200">
    <img src="https://nielitbhu.com/image.jpg" title="images" width="200" height="150">
    <img src="https://nielitbhu.com/new logo" title="logo" width="150" height="100">
    </body>
    </html>

    [attribute|=”value”]

    • This selector is used to select elements with the specified attribute starting with the specified value.
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    [class|=top] {
    background: yellow;
    }
    </style>
    </head>
    <body>
    <h1 class="top-header">Welcome</h1>
    <p class="top-text">Hello world!</p>
    <p class="content">Are you learning CSS?</p>
    </body>
    </html>
    
    

    [attribute^=”value”]

    • This selector is used to select elements whose attribute value begins with a specified value.

    Note: The value does not have to be a whole word!

    Example
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div[class^="test"] {
    background: yellow;
    }
    </style>
    </head>
    <body>
    <div class="first_test">Hello.</div>
    <div class="second">Welcome</div>
    <div class="test">The third test div element.</div>
    <div class="test_try">The fourth test div element.</div>
    <p class="test">This is a paragraph.</p>
    <p class="test_try">This is a paragraph.</p>
    </body>
    </html>
    

    [attribute$=”value”]

    • This selector is used to select elements whose attribute value ends with a specified value.
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    div[class$="test"]{
    background: yellow;
    }
    </style>
    </head>
    <body>
    <div class="first-test">My first test</div>
    <div class="second">My second test</div>
    <div class="My-test">My test third</div>
    <p class="test">This is a paragraph.</p>
    </body> </html>

    [attribute*=”value”]

    • This selector is used to select elements whose attribute value ends with a specified value.

    Note: The value does not have to be a whole word!

    Example
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    [class*="te"]{
    background: yellow;
    }
    </style>
    </head>
    <body>
    <div class="first-test">My first test</div>
    <div class="second">My second test</div>
    <div class="My-test">My test third</div>
    <div class="mytest">My test fourth</div>
    </body>
    </html>
    English Hindi