CSS Attribute Selector

The 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 for selecting the HTML elements which has specific attribute and/or attribute(s) having any specified value associated with it.

The attribute selectors of CSS allows 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:
  • [attribute]
  • [attribute="value"]
  • [attribute~="value"]
  • [attribute|="value"]
  • [attribute^="value"]
  • [attribute$="value"]
  • [attribute*="value"]

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>

CSS [attribute="value"] Selector

This selector chooses HTML element having 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.runphponline.com/" target="_top">Run PHP Online</a></p>
    <p><a href="#" target="_blank">W3schools.in</a></p>
</body>

CSS [attribute~="value"] Selector

This attribute selector chooses all the elements that are having an attribute value as a list of space-separated values or containing 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>

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">TechnoGeek</p>
</body>

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>

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>

Scroll Back to Top