CSS Attribute Selector - Simplified

CSS attribute selectors are powerful and versatile tools that allow developers to select elements based on their attributes. In this article, we will explore various attribute selectors and provide clear examples to help you understand their usage. Let's dive in!

[attribute]

The [attribute] selector selects elements that have the specified attribute. For instance, if we have a HTML element with the attribute "data-custom", we can select it like this:

[data-custom] {
  /* CSS rules */
}

Example usage: Suppose we have a button with the attribute "data-button". We can style it using the following CSS:

[data-button] {
  background-color: yellow;
  border-radius: 10px;
  color: black;
}

[attribute="value"]

The [attribute="value"] selector selects elements that have the specified attribute with an exact value. For example, if we have a HTML element with the attribute "data-custom" set to "any", we can select it like this:

[data-custom='any'] {
  /* CSS rules */
}

Example usage: Let's say we have a button with the attribute "data-button" set to "blue". We can style it using the following CSS:

[data-button='blue'] {
  background-color: blue;
  border-radius: 10px;
  color: white;
}

[attribute^="value"]

The [attribute^="value"] selector selects elements that have the specified attribute with a value starting with a specific string. For example, if we have a HTML element with the attribute "href" starting with "https://www", we can select it like this:

[href^="https://www"]
{
  /* CSS rules */
}

[attribute$="value"]

The [attribute$="value"] selector selects elements that have the specified attribute with a value ending with a specific string. For instance, if we have a HTML element with the attribute "src" ending with ".png", or a element has class name like "css34-34sf3d-option" we can select it like this:

[src$='.png'] {
  /* CSS rules */
}

[class$='option'] {
  /* CSS rules */
}

[attribute~="value"]

The [attribute~="value"] selector selects elements that have the specified attribute with a value containing a specific word. For instance, if we have a HTML element with the attribute "class" set to "btn outline primary", we can select it like this:

[class~='primary'] {
  /* CSS rules */
}

But it won't work for element with the attribute "class" set to "btn-primary". Because ~ is used as word selector not substring selector.

[class~='primary'] {
  /* CSS rules */
}

[attribute*="value"]

The [attribute*="value"] selector selects elements that have the specified attribute with a value containing a specific substring. For example, if we have a HTML element with the attribute "alt" containing the word "logo", we can select it like this:

[alt*='logo'] {
  /* CSS rules */
}

These are some of the commonly used CSS attribute selectors. By utilizing them effectively, you can target specific elements based on their attributes and achieve the desired styling or functionality. Experiment with these selectors to enhance your CSS skills and make your web development more dynamic and interactive.