CSS Selectors

I can never remember the syntax for this stuff.

Select by attribute presence

<p>This paragraph has a <a href='#'>link</a> in it.</p>

[href] { background : cyan; }

This paragraph has a link in it.

Combine with element

<p title='wigwam'>This paragraph has a title attribute.</p>

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.

<p>This paragraph has a couple of <span title='wigwam'>spans</span> with a <span title='wigwam'>title</span> attributes.</p>

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

<p>This paragraph has a couple of <span title='t1'>spans</span> with different <span
title='t2'>title</span> attributes.</p>

[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.

<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>

[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.

<p>This paragraph has a couple of <span title='twotone'>spans</span> with different <span title='donedown'>title</span> attributes.</p>

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.

<p>This paragraph has a couple of <span title='twotone'>spans</span> with different <span title='onedown'>title</span> attributes.</p>

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.

<p>This paragraph has a couple of <span title='one-up'>spans</span> with different <span title='one-down'>title</span> attributes.</p>

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 (*)

<p>This paragraph has a couple of <span title='donedown'>spans</span> with different <span title='doneup'>title</span> attributes.</p>

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.

<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>

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.

<p>This paragraph has a <a href='https://lewiswalsh.com'>link</a> with a dynamically printed href.</p>

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.

[title*="one" i] { }