CSS Attribute selectors

CSS Attribute Selector is used to select the HTML elements that have a specific attribute or attribute with a specified value.

Understanding the Attribute Selectors 

It offers an easy and powerful way to apply the styles to HTML elements on the basis of the presence of a particular attribute or attribute value.

An attribute selector can be created by putting the attribute—optionally with a value in a pair of square brackets. An element type selector can also be placed before it. 

The most common attribute selectors are described in the following section:

CSS [attribute] Selector 

This simplest form of an attribute selector allows you to apply the style rules to an element in case a given attribute exists. For example, All the elements that have a title attribute can be styled by using the following style rules:

Example :

[title] {
    color: blue;
}

In the above example, the selector [title] matches all elements that have a title attribute.

This selection can also be restricted to a particular HTML element by placing the attribute selector after an element type selector, like in the example below:

Example :

abbr[title] {
    color: red;
}

In the above example, the selector abbr[title] matches only <abbr> elements that have a title attribute. It will only match the abbreviation and not match the anchor elements with title attributes.

CSS [attribute="value"] Selector 

The = operator can be used to make an attribute selector that matches any element having an attribute value exactly equal to the given value:

Example:

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

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

CSS [attribute~="value"] Selector 

You can use the ~= operator to make an attribute selector matches any element whose attribute value is a list of space-separated values (like class="alert warning") , one of which is exactly equal to the specified value:

Example :

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

This selector matches any HTML element with a class attribute that contains space-separated values, one of which is warning. For example, it matches the elements having the class values warning, alert warning etc.

CSS [attribute|="value"] Selector

 The |= operator can be used to make an attribute selector match any element having an attribute that has a hyphen-separated value list beginning with the specified value:

Example :

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

In the above example, the selector matches all elements having a lang attribute that contains a value starting with en, irrespective of whether or not a hyphen and more characters follow that value. In simple words, this attribute selector matches the elements having lang attribute with values en, en-US, en-GB, etc., but not US-en, GB-en. 

CSS [attribute^="value"] Selector 

The ^= operator can be used to make an attribute selector match any element whose attribute value begins with a specified value. Again, the attribute value does not have to be a whole word.

Example:

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

In the example above, the selector targets all external links and adds a small icon that indicates that they will open in a new tab or window. 

CSS [attribute$="value"] Selector 

Similarly, the $= operator can be used to select all elements whose attribute value ends with a specified value. So, again, it does not have to be a whole word.

Example :

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

In the above example, the selector selects all <a> elements that link to a PDF document and adds a small PDF icon to provide the user hints about the link. 

CSS [attribute*="value"] Selector 

The *= operator can be used to make an attribute selector that matches all elements whose attribute value contains a specified value.

Example :

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

In the above example, this selector matches all HTML elements having class attribute values that contain a warning. For instance, it matches the elements that have class values warning, alert warning, alert-warning or alert_warning, etc. 

Styling Forms with Attribute Selectors 

The attribute selectors are specifically helpful to style forms without class or id:

Example :

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;
}