Last Updated on December 23, 2015
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 */
}
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 */
}
Multiple attribute selection
img[alt~="person"][src*="lorem"] {
/* style rules here */
}