Підручник css - селектори атрибутів

Селектори атрибутів - це селектори, які дозволяють застосувати стилі до будь-яких HTML-елементів мають певний атрибут або певне значення атрибута. Існує багато способів їх застосування, але, не дивлячись на таку гнучкість, на практиці селектори атрибутів досить рідко використовуються, так як є більш зручні селектори. Хоча, з іншого боку, іноді вони дуже допомагають.

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

Для застосування стилів до елементів з певним атрибутом, необхідно в квадратних дужках, []. вказати даний атрибут.

Щоб стилі застосували до елементів мають не просто певний атрибут, а атрибут з конкретним значенням - треба після атрибута написати знак рівності (=) і це значення, яке можна взяти в лапки.

Деякі атрибути можуть мати відразу кілька розділених пропуском значень (наприклад, атрибут rel тега або class. який ми розглянемо трохи пізніше). Так ось, щоб задати стилі елементам, у яких одне зі значень в атрибутах однакове, треба після атрибута поставити знаки

= (Приблизно дорівнює), а потім написати необхідне значення.

Четвертий варіант призначений для атрибутів, у яких значення може складатися з декількох слів розділених дефісом (припустимо, той же class). І він дозволяє застосувати стилі до всіх елементів, у яких перше слово в значенні атрибутів - однакове. Наприклад, class = "block-left" і class = "block-right". Тут однакова частина - block. тому її і можна використовувати в якості значення.

П'ятий спосіб підключає стилі до елементів, які мають значення атрибутів починаються з однакового тексту. Наприклад, src = "images / bird.png" і src = "images / cat.jpg". Тут однакова частина images / або images або image і т.д. Саме ця однакова частина і записується в якості значення.

Аналогічний п'ятого, але тут вибірка йде по частині тексту, яким навпаки закінчуються значення атрибутів. Припустимо, src = "image / bird.png" і src = "picture / dog.png". Зрозуміло, що тут однакова частина .png.

На жаль, Internet Explorer 6.0 взагалі не розуміє селектори атрибутів.

Приклад використання селекторів атрибутів в CSS

Результат в браузері

Об'єднання селекторів атрибутів

Селектори атрибутів можна об'єднувати між собою або з іншими селекторами (наприклад, тегів), щоб отримати більш вузькі параметри вибору. При об'єднанні селектори пишуться відразу один за одним, тобто між ними не повинно бути пробілів. В цьому випадку стилі застосуються тільки до тих елементів, які соотвествуют відразу всіма зазначеними селекторам. Загальний синтаксис наступний.

[Селектор атрібутов1] [селектор атрібутов2] <свойство: значение;.>

селектор [селектор атрібутов1] [селектор атрібутов2] <свойство: значение;.>

Приклад об'єднання селекторів атрибутів в CSS

Результат в браузері

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

  1. Зробіть так, щоб будь-які абсолютні посилання на вашій сторінці виводилися жирним шрифтом без підкреслення. Для цього вам знадобляться властивості font-weight і text-decoration.
  2. Зробіть дві відносні посилання і по дві абсолютні, провідні на пошуковики Яндекс і Google. Нехай посилання ведуть на Яндекс будуть червоного кольору, на Google - зеленого, а решта - синього. Використовуйте властивість color.