The Guide to Custom Attribute Selectors in CSS

The CSS custom attribute selector lets you select one or more DOM elements with a given custom attribute.

With this selector, which is supported by most modern browsers (see CanIUse.com), you can select DOM elements comprehensively with plain CSS, without the need for JavaScript or jQuery.

Basic Uses

With the custom attribute selector in CSS, you can look for only elements that have a given custom attribute. You can also match elements based on a specific value of that custom attribute.

/* Any element with custom attribute set-color */

[set-color] {
  color: blue;
}

/* Hyperlinks with custom attribute set-color */

a[set-color] {
  color: blue;
}

/* Hyperlinks with custom attribute set-color="blue" */

a[set-color="blue"] {
  color: blue;
}

Advanced Uses

Attributes That Contain a Word in a Space-Separated List of Words

The [attribute~="value"] selector lets you select DOM elements that have the given custom attribute and whose value contains a given word in a space-separated list of words.

For example, the CSS rule:

/* Hyperlinks whose set-color attribute is exactly "blue" or contains "blue" in a space-separated list */

a[set-color~="blue"] {
  color: blue;
}

Will select all <a> hyperlinks that have a set-color attribute containing the word blue and separated by blank space, whether that’s baby blue, azure blue, or navy blue, but not baby-blue, azure-blue, or navy-blue.

(This rule will also select all elements that have the custom attribute and whose value is only and exactly blue.)

Attributes That Contain a Word in a Space-Separated List of Words

The [attribute|="value"] selector lets you select DOM elements that have the given custom attribute and whose value contains a given word in a hyphen-separated list of words.

For example, the CSS rule:

/* Hyperlinks whose set-color attribute is exactly "blue" or contains "blue" in a hyphen-separated list */

a[set-color|="blue"] {
  color: blue;
}

Will select all <a> hyperlinks that have a set-color attribute containing the word blue and separated by hyphens, whether that’s baby-blue, azure-blue, or navy-blue, but not baby blue, azure blue, or navy blue.

(This rule will also select all elements that have the custom attribute and whose value is only and exactly blue.)

Attributes That Contain a Value

The [attribute*="value"] selector lets you select DOM elements that have the given custom attribute and whose value contains a given value, whether by itself or within a word or number.

For example, the CSS rule:

/* Hyperlinks whose href attribute contains "makersaid.com" */

a[href*="makersaid.com"] {
  color: blue;
}

Will select <a> hyperlinks that contain “makersaid.com,” whether they start with http:// or https://, come with or without a “www” prefix, and regardless of the page path that follows the domain name.

This selector can be particularly useful when targeting internal links only with a CSS rule.

Attributes That Start With a Word

The [attribute^="value"] selector lets you select DOM elements that have the given custom attribute and whose value starts with a given word.

For example, the CSS rules:

/* Non-secure (HTTP) hyperlinks */

a[target^="http://"] {
  color: grey;
}

/* Secure (HTTPS) hyperlinks */

a[target^="https://"] {
  color: blue;
}

Will target, respectively, <a> hyperlinks with an unsecure, non-SSL and with a secure, SSL protocol.

Attributes That End With a Word

The [attribute$="value"] selector lets you select DOM elements that have the given custom attribute and whose value ends with a given word.

/* Hyperlinks whose href attribute ends with ".edu" */

a[href$=".edu"] {
  color: blue;
}

Complex Uses

Reversing Rules With the :Not() Pseudo-Class

With the CSS :not() pseudo-class, you can reverse any of the CSS selectors above to target only elements that don’t match the rule:

/* Hyperlinks whose href attribute does not contain "makersaid.com" */

a:not(a[href*="makersaid.com"]) {
  color: blue;
}

To get this to work, state your target rule (for example, all hyperlinks), then append it with a :not() pseudo-class for your exclusion rule (for example, not hyperlinks with [href*="makersaid.com"].

Excluding n-th Elements With the :Not() Pseudo-Class

You can also use the :not() pseudo-class to exclude n-th elements within your HTML markup.

For example, the code:

/* The first hyperlinks whose href attribute does not contain "makersaid.com" */

a:not(a[href*="makersaid.com"]:nth-child(1)) {
  color: blue;
}

Will only exclude the first occurence of the hyperlink [href*="makersaid.com"] from your CSS selection. The :nth-child() pseudo-class also supports odd and even selections.