CSS Attribute Selectors

❮ Prev Next ❯

The attribute selectors provide a powerful way to select and style elements based on the presence or value of HTML attributes. They allow you to target elements dynamically without the need for explicit class or ID selectors.

We already introduced several of the basic CSS selectors: using element selectors, class, id, how to combine them, how to target multiple classes, how to style several selectors in the same rule, how to follow the page hierarchy with child and direct child selectors, and adjacent siblings.

In this section we'll analyze attribute selectors, and we have talked about pseudo class and pseudo element selectors in the previous chapters.

What are Attribute Selectors?

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

They provide a flexible way to target elements without relying solely on classes or IDs, making your CSS more dynamic and adaptable.

Selecting Elements by Attribute

You can select elements that have a specific attribute using the [attribute] syntax. This selects any element that contains the specified attribute, regardless of its value.

Example: 


a[href] {
  font-size :1.5rem;
}

Attribute presence selectors

The first selector type is the attribute presence selector.

We can check if an element has an attribute using the []syntax. The p[id] will select all ptags in the page that have an idattribute, regardless of its value:

Example: 


p[id] {
  color :yellow;
}

Exact attribute value selectors

Inside the brackets you can check the attribute value using =, and the CSS will be applied only if the attribute matches the exact value specified:

Example: 


p[id='my-id'] {
  color :green;
}

Match an attribute value portion

While = let us check for exact value, we have other operators:

  • *= checks if the attribute contains the partial
  • *= checks if the attribute contains the partial
  • ^= checks if the attribute starts with the partial
  • $= checks if the attribute ends with the partial
  • |= checks if the attribute starts with the partial and it's followed by a dash (common in classes, for example), or just contains the partial
  • ~= checks if the partial is contained in the attribute, but separated by spaces from the rest

All the checks we mentioned are case sensitive.

Example: 


input[type*="password"] {
  background-color :blue;
} 

img[src^="https://"] {
  margin-left :2.5rem;
} 

a[href$=".pdf"] {
  color :brown;
} 

div[class|="box"] {
  background-color :blue;
} 

div[class~="box"] {
  background-color :yellow;
}

Attribute Presence and Absence

CSS attribute selectors also support targeting elements based on the presence or absence of specific attributes.

Example: 


input[type="checkbox"]:checked {
  margin-left :1rem;
} 

a[target="_blank"]:not([rel="noopener noreferrer"]) {
  color :yellow;
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      a[href] {
        font-size :1.5rem;
      } 
      
      p[id='my-id'] {
        color :green;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <div class="container">
        <h3>welcome to Coding Koleji </h3>
        <p id="my-id" >A Website for given free learning material online</p>
        <a href="www.codingkoleji.com" >Click here to visite</a>
      </div>
    </body>
  </html>

If you add an i just before the closing bracket, the check will be case insensitive. It's supported in many browsers but not in all

CSS attribute selectors provide a versatile way to select and style elements based on their attributes and attribute values.

By mastering the various attribute selector syntax and techniques, you can create more dynamic and adaptable CSS stylesheets that respond to the structure and content of your HTML documents.

❮ Prev Next ❯