Less used & known CSS selectors, aka attribute selectors

Having written CSS & SASS for years & using BEM it’s a rarity that I find the need to use some of the selectors I’ll list below but, every once in a while a situation comes up where I’m so thankful that they’re there.

Here are some attribute examples

  • target: [target="val"]
  • value: [target="val"]

Here’s a reference table of selectors I’ll mention in this post:

Selector Example
Begins with [attr^="val"]
Ends with [attr$="val"]
Contains (string) [attr*="val"]
Contains (text) [title~="text"]

Begins with

The Begins with css selector uses the ^ or carrot and will select an element that starts with the defined value.

Example

<a href="#something">something</a>
<a href="#not-something"></a>
a[href^="#something"] {
    background: red;
}

In the example above the first <a>, or anchor tag would have a red background & the second <a> would have no background.

Ends with

The ends width css selector uses the $ or dollar sign and will select an element that ends with the defined value.

Example

<a href="#something-else">something</a>
<a href="#something"></a>
a[href$="#else"] {
    background: blue;
}

In the example above the first <a>, or anchor tag would have a blue background & the second <a> would have no background. This can be useful if your looking to select an something in a script library like jQuery where the begin of the class name is a standard naming convention.

Contains (string)

The Container (string) css selector uses the * or star and will select an element that has the defined value in a string.

Example

<a href="#something-in-here">something</a>
<a href="#something"></a>
a[href*="here"] {
    background: yellow;
}

In the example above the first <a>, or anchor tag would have a yellow background & the second <a> would have no background. This can be useful if you’re trying to select something that has been concatenated into a data attribute.

Contains (text)

The Container (text) css selector uses the ~ or approx and will select an element that has the defined text in an attribute.

Example

<a title="some special text">something</a>
<a title="text"></a>
a[href~="text"] {
    background: yellow;
}

In the example above the first <a>, or anchor tag would have a green background & the second <a> would have no background. This can be useful if you’re trying to select something that has specific word in a title attribute.

Summation

These selectors are powerful; especially when you have to select 3rd party content (content that may or may not be on a page).