CSS Selector Level 3 » Attribute

This are attribute selectors which provide selecting matching strings in the value of an attribute.

These CSS3 selectors already occurred less powerful as attribute selectors in CSS2.


Prefix

The prefix attribute selector matches an element whose attribute value (which should not be empty) starts with the prefix value.

Syntax

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

Example

Copy
a[href^="https://"] {
    border-bottom: 1px solid red;
}

Here will have all https:// links a red bottom border.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.0) Yes (1.0) Yes (12.0) Yes (8.0) Yes (9.5)

Suffix

The suffix attribute selector selects an element whose attribute value (which shouldn't be empty) ends with the suffix value.

Syntax

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

Example

Copy
a[href$=".pdf"] {
    border-bottom: 1px solid red;
}

Every link with the ending of .pdf will have a red bottom border.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.0) Yes (1.0) Yes (12.0) Yes (8.0) Yes (9.5)

Contains

The contains attribute selector matches any element whose attribute value occurrs at least one time.

Syntax

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

Example

Copy
[title*="example"] {
    border: 1px dashed blue;
}

Every element which contains the value example get a dashed blue border.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.0) Yes (1.0) Yes (12.0) Yes (8.0) Yes (9.5)

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