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