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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
[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.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div[attribute="value"] { /* style rules here */ } .module[attribute="value"] { /* style rules here */ } #header[attribute="value"] { /* style rules here */ } |
Multiple attribute selection
1 2 3 4 5 |
img[alt~="person"][src*="lorem"] { /* style rules here */ } |