CSS Attribute Selectors

Finding and selecting

Here is a list of attributes. In my career I’ve used exact values, ^, and * in many applications, so I’m making a personal list because it’s useful to know the other options available.

The three tough ones for me to remember are:
$ – ends with
| – (pipe) find dash separated value
~ – find space separated value
(Ref 1 Ref 2)


[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value=|"foo"] {
  /* Attribute value has this in a dash-separated list somewhere */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

[data-value] {

/* Attribute exists */

}

[data-value="foo"] {

/* Attribute has this exact value */

}

[data-value*="foo"] {

/* Attribute value contains this value somewhere in it */

}

[data-value~="foo"] {

/* Attribute has this value in a space-separated list somewhere */

}

[data-value^="foo"] {

/* Attribute value starts with this */

}

[data-value=|"foo"] {

/* Attribute value has this in a dash-separated list somewhere */

}

[data-value$="foo"] {

/* Attribute value ends with this */

}

In use with div, class and id.


div[attribute="value"] {
  /* style rules here */
}

.module[attribute="value"] {
  /* style rules here */
}

#header[attribute="value"] {
  /* style rules here */
}

div[attribute="value"] {

/* style rules here */

}

.module[attribute="value"] {

/* style rules here */

}

#header[attribute="value"] {

/* style rules here */

}

Multiple attribute selection


img[alt~="person"][src*="lorem"] {
  /* style rules here */
}

img[alt~="person"][src*="lorem"] {

/* style rules here */

}

Peter Dillon

Development teams seek me out for visual design, reskinning, information hierarchy, usability, iconography, improving task flow, improving the front end build process and more. I specialize in creating engaging solutions to solve real world problems while designing beautiful applications that make the lives of users easier.