CSS Attribute Selectors

Understanding Attribute Selectors

CSS attribute selectors offer a simple and effective method to style HTML elements based on the presence of specific attributes or attribute values.

You can create an attribute selector by enclosing the attribute—optionally with a value—within square brackets. It's also possible to add an element type selector before it.

Below are descriptions of the most common attribute selectors.

CSS [attribute] Selector

This is the most basic form of an attribute selector, applying style rules to an element if a given attribute exists. For instance, all elements with a title attribute can be styled using the following rules:

[title] {
color: blue;
}

The selector [title] in the above example targets all elements with a title attribute.

You can refine this selection to a specific HTML element by placing the attribute selector after an element type selector, like this:

abbr[title] {
color: red;
}

The selector abbr[title] only matches <abbr> elements with a title attribute, thus targeting abbreviations but not anchor elements with a title attribute.


CSS [attribute="value"] Selector

The = operator allows an attribute selector to match elements whose attribute value is exactly equal to a specified value:

input[type="submit"] {
border: 1px solid green;
}

In the above example, the selector matches all <input> elements with a type attribute value equal to submit.


CSS [attribute~="value"] Selector

The ~= operator enables an attribute selector to match elements with an attribute value consisting of a list of space-separated values (e.g., class="alert warning"), one of which exactly matches the given value:

[class~="warning"] {
color: #fff;
background: red;
}

This selector targets any HTML element that possesses a class attribute with multiple values separated by spaces, among which one of them is warning. For example, it matches elements with class values like warning, alert warning, etc.


CSS [attribute|="value"] Selector

The |= operator allows an attribute selector to match elements whose attribute contains a hyphen-separated list of values beginning with the specified value:

[lang|=en] {
color: #fff;
background: blue;
}

In the above example, the selector matches all elements with a lang attribute containing a value starting with en, regardless of whether that value is followed by a hyphen and additional characters. Essentially, it matches elements with lang attributes having values like en, en-US, en-GB, etc., but not US-en, GB-en.


CSS [attribute^="value"] Selector

The ^= operator allows you to create an attribute selector that matches any element whose attribute value begins with a specific value. It doesn't need to be an entire word.

a[href^="http://"] {
background: url("external.png") 100% 50% no-repeat;
padding-right: 15px;
}

In the example above, the selector targets all external links, adding a small icon to indicate they will open in a new tab or window.


CSS [attribute$="value"] Selector

Likewise, the $= operator can be used to create a selector that matches elements whose attribute value ends with a specified value. It doesn't need to be an entire word.

a[href$=".pdf"] {
background: url("pdf.png") 0 50% no-repeat;
padding-left: 20px;
}

In the example above, the selector matches all <a> elements that link to a PDF document, adding a small PDF icon to signal the link type to the user.


CSS [attribute*="value"] Selector

The *= operator allows you to create an attribute selector that matches elements whose attribute value contains a specified value.

[class*="warning"] {
color: #fff;
background: red;
}

In the example above, the selector matches all HTML elements with a class attribute that contains the word warning. It will match class values like warning, alert warning, alert-warning, or alert_warning.


Styling Forms with Attribute Selectors

Attribute selectors are very helpful for styling forms without using class or id attributes:

input[type="text"], input[type="password"] {
width: 150px;
display: block;
margin-bottom: 10px;
background: yellow;
}
input[type="submit"] {
padding: 2px 10px;
border: 1px solid #804040;
background: #ff8040;
}