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) Yes (3) Yes (1) Yes (12) Yes (8) 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) Yes (3) Yes (1) Yes (12) Yes (8) Yes (9.5)

# Contains

The contains attribute selector matches any element whose attribute value contains the given value at least once.

# 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) Yes (3) Yes (1) Yes (12) Yes (8) Yes (9.5)

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