WEB-нотатки - записник он-лайн

Селектори атрибутів.

Простий вибір атрибутів.

Щоб вибрати теги з певним атрибутом, достатньо вказати цей атрибут після основного селектора. Наприклад так:

Code

h1 [class] (color: red;)

Селектори атрибутів також можна групувати:

Code

img [alt] [title] (border: 3px solid red;)

Цікаво, що цей вид селектора можна використовувати для налагодження. Наприклад, дане правило обведе червоною рамкою всі зображення, що мають атрибути alt і title. Відповідно, зображення які не мають цих атрибутів, обведені не будуть і місце помилки відразу буде видно.

Вибір на підставі конкретного значення ознаки.

Цей вид дозволяє зробити вибір більш конкретним. Ви можете вказати атрибут і його конкретне значення, щоб вибрати чітко певний елемент.

Code

a [href="http://www.w3.org/"] [title="W3C Home"] (font-size: 200%;)

Зверніть увагу, що цей вид селектора має на увазі точний збіг значення ознаки. Якщо значення не співпаде - правило буде проігноровано.

Вибір по частковому значенням атрибута

Будь-який атрибут, що допускає наявність розділеного пробілами списку слів, допускає і вибір на підставі будь-якого з цих слів. Класичний приклад - атрибут class, здатний приймати як значення декілька слів. Візьмемо приклад:

Code

<р class="urgent warning"> Тест тест тест! </ р>

Скажімо, потрібно вибрати елементи, атрибут клас визначено як warning, тоді потрібно написати наступне правило:

Code

p [class~="warning"] (font-weight: bold;)

Зверніть увагу на знак тильди (~) в селекторі. Цей знак потрібно використовувати в разі вибору слова, розділеного пробілами. Якщо цей знак пропустити, то правило буде шукати сувору відповідність.
Також зауважте, що даний приклад селектора фактично аналогічний селектору класів, тобто запису p.warning і p [class~=«warning»] еквівалентні.
Ця форма селектора може застосовуватися не тільки для атрибута class, але і для будь-якого іншого атрибута. Приміром, є кілька зображень, що мають title «Малюнок1», "Малюнок2" і т.д. Можна легко вибрати їх одним правилом:

Code

img [title~="Малюнок"] (border: 1px solid gray;)

Крім тильди, є ще кілька символів, за допомогою яких можна робити вибір щодо часткового значенням атрибута.
[class^=«bar»] - Вибирає будь-який елемент, значення атрибуту class якого починається з «bar».
[class$=«bar»] - Вибирає будь-який елемент, значення атрибуту class якого заканчіваніе «bar».
[class*=«bar»] - Вибирає будь-який елемент, значення атрибуту class якого містить підрядок «bar».
Наступний код це продемонструє:

Code

span [class ^ = "bar"] (background: silver;)
span [class $ = "y"] (font-weight: bold;)
span [class *= "clou"] (font-style: italic;)

Code

Mercury 
 Venus 
 Earth

Для прикладу. Можна вибирати посилання певного домену:

Code

a [href*="site.com"] (font-weight: bold;)

Не забувайте, що Ви не обмежені лише атрибутами class і href. Може використовувати будь-які: title, alt, src, id ... все, що завгодно.

Вибір конкретного атрибута

Останній тип селектора атрибутів простіше показати, ніж описати. Приклад:

Code

img [src|="figure"] (border: 1px solid gray;)

Це правило буде вибирати будь-який елемент, чий атрибут src еквівалент
стрічці figure або починається з figure. Тобто, будуть вибрані всі малюнки, назва файлу яких починається з figure (figure1, figure-2 і т.д.

Селектори атрибутів підтримуються браузерами Mozilla, Safari, Opera, але не підтримуються Internet Explorer аж до IЕ5/Мас і IE6/Windows.
IE7 і IE8 повністю підтримує всі селектори атрибутів CSS2.1.