« Previous Next »

CSS Attribute Selectors

Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute. The following example selects all elements with a target attribute:

Output :

CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value.

Example :-

Selects all <a> elements with a target="_blank" attribute:

Output :

CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":

Output 3:

CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).

The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".

Output :

Styling Forms

The attribute selectors can be useful for styling forms without class or ID:

Output:-:
« Previous Next »