CSS Selector Level 2 » Attribute

These attribute selectors allows selecting matching strings in the value of an attribute.

These are the CSS2 selectors but there are also new attribute selectors in CSS3.


Occurs

This attribute selector matches any element who has such a given attribute.

Syntax

Copy
[attribute] {
    /* declarations */
}

Example

Copy
[title] {
    border-bottom: 1px solid black;
}

All elements which have an title attribute will selected and get a black bottom border.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.0) Yes (1.0) Yes (12.0) Yes (7.0) Yes (6.0)
Mobile Yes (1.0) Yes (1.0) Yes (1.0) Yes (12.0) Yes (7.0) Yes (2.0)

Exactly

This attribute selector matches any element which attribute value is exactly the same as specified via CSS.

Syntax

Copy
[attribute="value"] {
    /* declarations */
}

Example

Copy
[lang="en"] {
    border-bottom: 1px solid black;
}

All elements which have an lang attribute to en will get a black bottom border.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.0) Yes (1.0) Yes (12.0) Yes (7.0) Yes (6.0)

Whitespace

This attribute selector matches elements which whitespace-separated attribute values are the same as specified.

Syntax

Copy
[attribute~="value"] {
    /* declarations */
}

Example

Copy
[class~="alert"] {
    background-color: red;
}

All elements which have an class attribute with an alert class (seperated by whitespace(s)) will get a red background.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.0) Yes (1.0) Yes (12.0) Yes (7.0) Yes (6.0)

Hypen

This attribute selector selects all elements which hyphen-separated attribute values are the same.

Syntax

Copy
[attribute|="value"] {
    /* declarations */
}

Example

Copy
[lang|="en"] {
    border: 1px solid blue;
}

All elements that have an English - en - attribute which is or could be seperated by hypens will get a blue border.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.0) Yes (1.0) Yes (12.0) Yes (7.0) Yes (6.0)

Please wait a moment, the comments start loading now...
explorermozillachromesafariopera