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