skip navigation

Attribute Selectors

Tagged in: selectors
Grouped in: selectors

CSS attribute selectors allow selecting an element based on it’s attribute. For the most part this is pretty simple. Just remember to use square brackets.

Given an HTML link:

<a href="#">link text</a>

You can select this in CSS using:

a[href="#"] {
    text-decoration: underline;
}

However things get more tricky when using partial selections.

For instance you might want to be less specific and select all anchor tags with a link that begins with https like this:

<a href="https://example.com/">link text</a>

To make partial selection use:

Symbol Does example What it does example
* contains [class*=bin] selects values that contain bin <div class="bin-box bins binshop">
^ begins with [href^="https"] selects all https links <a href="https://example.com/">
$ ends with [class$=bin] selects any words that end with in selects both boxbin and bobbins
~ whole words [class~=bin] selects whole words in a list separated by spaces, only bin here: <div class="box bin bins">
| whole words that start with [class|=bin] selects values that start with bin but must be a whole word separated with a space or a hyphen <div class="bin-box bins">
☝