CodePen Embed - CSS selector matches class prefix/suffix

<ul>
    <li class="btn"><code>class="btn"</code></li>
    <li class="btn-foo"><code>class="btn-foo"</code></li>
    <li class="btn-foo bar"><code>class="btn-foo bar"</code></li>
    <li class="bar btn-foo"><code>class="bar btn-foo"</code></li>
    <li class="bar-btn-foo"><code>class="bar-btn-foo"</code></li>
</ul>

<ul>
    <li class="btn"><code>class="btn"</code></li>
    <li class="foo-btn"><code>class="foo-btn"</code></li>
    <li class="bar foo-btn"><code>class="bar foo-btn"</code></li>
    <li class="foo-btn bar"><code>class="foo-btn bar"</code></li>
    <li class="foo-btn-bar"><code>class="foo-btn-bar"</code></li>
</ul>

/* Prefix */
[class^="btn-"],
[class*=" btn-"] {
    background-color: yellow;
}

/* Suffix */
[class$="-btn"],
[class*="-btn "] {
    background-color: pink;
}

This Pen is owned by Takeru Suzuki on CodePen.

See more by @terkel on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.