Code Snippet: CSS Wildcard Selectors

Just a quick CSS code snippet I found helpful the other day. CSS wildCard selectors

Attribute “Contains” Selector

a[id*=-myElement] {
    color: red;
}

The above CSS will find any anchor tag whose id attribute contains the text “-myElement”.

Attribute “Ends With” Selector

a[id$=-myElement] {
    color: red;
}

The above CSS will find any anchor tag whose id attribute ends with the text “-myElement”.

Attribute “Begins With” Selector

a[id^=-myElement] {
    color: red;
}

The above CSS will find any anchor tag whose id attribute ends with the text “-myElement”.

This is by no means a complete list of attribute selectors. For a full reference, check out this reference on the Mozilla Developer Network