CSS Selectors

Attribute Selectors

Browser compatibility
Chrome Firefox (Gecko) Internet Explorer Opera Safari
All 1.0 7 9 3

Matches elements when the specified attribute is present. Variations on syntax allow you to target specific attribute values and include options for matching specific string values. While it’s not necessary to preface the attribute value with a simple selector, doing so allows you to match specific element types with attribute values.

Basic Syntax

Attributes are surrounded by left and right brackets ([ * ]). To target any element with a class attribute, for example, you would use [class]. To be more specific, you can add a element selector prior to the attribute with no whitespace. The selector div[class] would match any div elements with a class attribute, regardless of the value of the attribute.


[class] {
  color: red;
    }
    
div[class] {
  color: red;
    }
    
Basic attribute selectors

Example:

Attribute selectors

Basic attribute selector syntax allows you to target elements based on the presence of an attribute, regardless of the value.

Options:

  • You can match specific values
  • You can match a specific value from a space-separated list
  • You can match a value's prefix
  • You can match a value's suffix
  • You can match a value that contain's a specified string value