CodePen Embed - Attribute Selectors #5

<h3>Demonstrating case insensitive attribute matching</h3>
<span class="case-insensitive" title="tREe">Oak</span>,
<span class="case-insensitive" title="tree">Cedar</span>,
<span class="case-insensitive" title="TREE">Ash</span>,
<span class="case-sensitive" title="TREe">Maple</span>,
<span class="case-sensitive" title="tree">Beech</span>

.case-insensitive[title|="tree" i] {
	color: goldenrod;
	font-style: italic;
}

.case-sensitive[title|="tree"] {
	color: blue;
	font-weight: bold;
}

body {
	font-family: arial;
}

This Pen is owned by David Gwyer on CodePen.

See more by @dgwyer on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.