Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

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>

Результат

Первый абзац.

Второй абзац.

Третий абзац.

Четвёртый абзац.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2025 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru