Селектор атрибута по слову
Селектор атрибута по слову выбирает HTML-элементы, у которых значение указанного атрибута соответствует указанному слову или соответствует указанной последовательности символов, за которой следует дефис.
p[class|="bold"] { font-weight: bold; }
Вертикальная черта ( | ) в селекторе указывает, что выбор будет производиться по единственному слову или по начальному значению с последующим за ним дефисом. Если символ | пропущен, то получится требование к точному значению, исключающее варианты с дефисами.
Пример
p[class|="bold"] { font-weight: bold; }
<p class="bolder">Первый абзац.</p>
<p class="bold">Второй абзац.</p>
<p class="not bold">Третий абзац.</p>
<p class="bold-here">Четвёртый абзац.</p>
Результат
Первый абзац.
Второй абзац.
Третий абзац.
Четвёртый абзац.