CSS [attr~=value] — атрибут містить слово

HTML

<p title="flower rose">title="flower rose" — жовтий: є слово "flower"</p>
<p title="sunflower">title="sunflower" — без змін: слово інше</p>

CSS

[title~=flower] {
    background-color: yellow;
}

HTML

<p class="legend">
    <b class="k tilde">~= слово зі списку: синя рамка, блакитне тло й підпис</b>
    <b class="k star">*= будь-який шматок: жовта смуга ліворуч</b>
    <b class="k caret">^= початок: зелена смуга згори</b>
    <b class="k dollar">кінець рядка: фіолетова смуга знизу</b>
    <b class="k pipe">|= значення або значення з дефісом: червоний пунктир</b>
    <b class="k i">прапорець i: червона буква на початку рядка</b>
</p>

<ul class="cards">
    <li data-tags="css html js"><code>css html js</code></li>
    <li data-tags="css-grid"><code>css-grid</code></li>
    <li data-tags="cssmodules"><code>cssmodules</code></li>
    <li data-tags="html css"><code>html css</code></li>
    <li data-tags="CSS"><code>CSS</code> — інший регістр</li>
    <li data-tags=""><code>порожнє значення</code></li>
    <li data-tags="scss"><code>scss</code></li>
</ul>

<p class="note">Рядок «cssmodules» не підсвічено оператором ~=, хоча він і містить
    букви css: там немає окремого слова. Рядок «CSS» ловиться лише правилом
    з прапорцем i. Порожнє значення не ловиться нічим.</p>

CSS

.cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cards li {
    margin: 6px 0;
    padding: 8px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.cards li::after {
    color: #5a6472;
    font-size: .85em;
}

/* ~= — слово цілком */
.cards li[data-tags~="css"] {
    border-color: #2f6fd0;
    background: #eef4ff;
}

.cards li[data-tags~="css"]::after {
    content: " ← [data-tags~=css]";
}

/* *= — будь-який шматок усередині */
.cards li[data-tags*="css"] {
    border-left-width: 12px;
    border-left-color: #f2b134;
}

/* ^= — значення починається зі шматка */
.cards li[data-tags^="css"] {
    border-top-width: 12px;
    border-top-color: #3a9a4f;
}

/* $= — значення закінчується шматком */
.cards li[data-tags$="css"] {
    border-bottom-width: 12px;
    border-bottom-color: #a54ec0;
}

/* |= — точне значення або значення з дефісом і хвостом */
.cards li[data-tags|="css"] {
    outline: 3px dotted #d64545;
    outline-offset: 3px;
}

/* прапорець i вимикає чутливість до регістру */
.cards li[data-tags~="css" i]::before {
    content: "i ";
    color: #d64545;
    font-weight: 700;
}

.legend {
    margin: 0 0 12px;
}

.k {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .85em;
}

.tilde {
    background: #eef4ff;
    color: #2f6fd0;
}

.star {
    background: #fdf3dd;
    color: #8a5b00;
}

.caret {
    background: #edf9ef;
    color: #29713a;
}

.dollar {
    background: #f6eefb;
    color: #7a2f96;
}

.pipe,
.i {
    background: #fdeeee;
    color: #b52d2d;
}

.note {
    max-width: 520px;
    color: #5a6472;
    font-size: .9em;
}