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

CSS селектор [атрибут~=значение]

Поддержка браузерами

12.0+ 7.0+ 2.0+ 4.0+ 9.6+ 3.1+

Описание

Атрибут, который содержит список значений, разделенных пробелами, допускает выбор на основании любого из этих значений. В качестве примера можно рассмотреть атрибут class, способный принимать в качестве значения сразу несколько слов (названий классов):

<p class="myclass alert">Пример селектора выбора по частичному значению атрибута.</p>

Допустим, требуется выбрать только те элементы, атрибут class которых содержит в значении слово alert. Это возможно сделать посредством селектора атрибутов:

p[class~="alert"] { font-size: 150%; }

В примере стоит обратить внимание на наличие значка тильды(~). Тильда в данном селекторе является ключом для осуществления выбора элемента на основании наличия в значении атрибута нужного слова, отделенного пробелом. Если тильда будет пропущена, то получится требование к точному значению, которое выберет только элементы, где значении атрибута class содержится только слово alert.

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      [alt~=flower] { border: 5px double red; }
    </style>
  </head>

  <body>

    <p>Картинка с атрибутом alt, содержащим слово "flower", будет иметь красную рамку.</p>
    <p> 
      <img src="klematis.jpg" alt="klematis flower" width="150" height="113">
      <img src="img_flwr.gif" alt="flowers" width="224" height="162">
      <img src="landscape.jpg" alt="landscape" width="160" height="120">
    </p>

  </body>
</html>

Результат данного примера

Картинка с атрибутом alt, содержащим слово "flower", будет иметь красную рамку.

klematis flower flowers landscape

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

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