Attribute selectors for CSS

Attribute selectors let you target an element by its attribute or attribute value.
■ selector[attribute] targets a selector with a particular attribute.
<a href="http://www.mst3kinfo.com" title="Mystery Science Theater
➥ 3000"> Mystery Science Theater 3000</a>
a[title] {font-variant: italic;}
■
selector[attribute="value"] targets a selector with a particular attribute
and specific value.
<img src="catchathief.jpg" alt="learn how to catch a thief">
img[src="catchathief.jpg"] {border: 1px solid #999;}
■ selector [attribute~="value"] targets a selector with a particular
attribute and value where the value is one of multiple values separated
by a space.
<img src="csi.jpg" alt="CSI">
img[alt~="CSI"] {border: 1px #ff8000 solid;}

■ selector [attribute|="value"] targets an element with an attribute that
contains values separated by a hyphen in a list.
<img src="lg-rope.gif" width="500" height="300" title="large-rope">
img[title|="large"] {border: 1px solid #000;}