CSS Selectors

I can never remember the syntax for this stuff.

Select by attribute presence

1
<p>This paragraph has a <a href='#'>link</a> in it.</p>
1
[href] { background : cyan; }

This paragraph has a link in it.


Combine with element

1
<p title='wigwam'>This paragraph has a title attribute.</p>
1
p[title] { background : cyan; }

This paragraph has a title attribute.

Putting a space between p and [title] would specify the children of paragraph with title attributes.

1
<p>This paragraph has a couple of <span title='wigwam'>spans</span> with a <span title='wigwam'>title</span> attributes.</p>
1
p [title] { background : cyan; }

This paragraph has a couple of spans with a title attributes.


Target an attribute and its contents

The content of an attribute can also be specified by having the attribute equal something

1
2
<p>This paragraph has a couple of <span title='t1'>spans</span> with different <span
title='t2'>title</span> attributes.</p>
1
2
[title="t1"] { background : cyan; }
[title=t2] { background : yellow; }

This paragraph has a couple of spans with different title attributes.


Target a specific word in the attribute

Using the tilde (~) it is possible to target by a single string in a space separated list.

1
<p>This paragraph has a couple of <span title='one two three'>spans</span> with different <span title='one three four'>title</span> attributes.</p>
1
2
[title~="one"] { font-weight : bold; }<br/>
[title~="two"] { background : cyan; }

This paragraph has a couple of spans with different title attributes.

It is also possible to target a substring at the end using the dollar ($) sign.

1
<p>This paragraph has a couple of <span title='twotone'>spans</span> with different <span title='donedown'>title</span> attributes.</p>
1
span[title$="one"] { background : cyan; }

This paragraph has a couple of spans with different title attributes.

To target a substring at the beginning use the caret (^) sign.

1
<p>This paragraph has a couple of <span title='twotone'>spans</span> with different <span title='onedown'>title</span> attributes.</p>
1
span[title^="one"] { background : cyan; }

This paragraph has a couple of spans with different title attributes.

It is also possible to target an exact match followed by anything separated with a dash using the pipe (|) symbol.

1
<p>This paragraph has a couple of <span title='one-up'>spans</span> with different <span title='one-down'>title</span> attributes.</p>
1
span[title|="one"] { background : cyan; }

This paragraph has a couple of spans with different title attributes.

Lastly we can do a full text search using the asterisk (*)

1
<p>This paragraph has a couple of <span title='donedown'>spans</span> with different <span title='doneup'>title</span> attributes.</p>
1
span[title*="one"] { background : cyan; }

This paragraph has a couple of spans with different title attributes.


Attribute stacking

Attribute selection can also be stacked to give even finer control of selection.

1
<p>This paragraph has a couple of <span class='onetwothree' title='onetwothree'>spans</span> with different <span class='twothreefour' title='onetwothree'>title</span> attributes.</p>
1
span[class~='one'][title*="two"] { background : cyan; }

This paragraph has a couple of spans with different title attributes.


Outputting attributes

An element’s attribute can also be used in pseudo-elements for output.

1
<p>This paragraph has a <a href='https://lewiswalsh.com'>link</a> with a dynamically printed href.</p>
1
a:after { content: " (" attr(href) ")"; }

This paragraph has a link with a dynamically printed href.


Case sensitivity

By default all CSS attribute selectors are case-sensitive. To make the selection case-insensitive add an ‘i’ to the end of the selection.

1
[title*="one" i] { }