Урок 79 із 239
33%
← Назад

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

У цьому уроці розберемо селектори атрибутів CSS, які дозволяють вибирати HTML елементи за наявністю атрибутів та значеннями цих атрибутів.

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

Селектори атрибутів дозволяють звертатися до елементів не тільки за тегом або класом, а й за їх HTML атрибутами.

Наприклад, можна вибрати всі елементи, які мають атрибут title, або тільки посилання, у яких href починається з певного значення.

Вибір елемента за наявністю атрибута

[title] {
  color: red;
}

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

p[title] {
  color: blue;
}

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

p[title="hello"] {
  color: green;
}

Початок значення атрибута ^=

a[href^="http://"] {
  color: red;
}

Кінець значення атрибута $=

a[href$=".html"] {
  color: green;
}

Наявність слова у значенні атрибута *=

p[title*="hello"] {
  color: orange;
}

Початок значення класу ^=

p[class^="top-"] {
  color: purple;
}
❗ Важливо:

Селектори атрибутів корисні для стилізації форм, посилань, кнопок та інших елементів без створення зайвих класів.

Практичні завдання

📌 Завдання:
  1. №1
  3. Напишіть селектор, який вибере всі елементи з атрибутом title.
📌 Завдання:
  1. №2
  3. Напишіть селектор, який вибере всі абзаци з атрибутом title.
📌 Завдання:
  1. №3
  3. Напишіть селектор, який вибере всі абзаци з атрибутом title="hello".
📌 Завдання:
  1. №4
  3. Напишіть селектор, який вибере всі посилання href яких починаються з http://.
📌 Завдання:
  1. №5
  3. Напишіть селектор, який вибере всі посилання href яких закінчуються на .html.
📌 Завдання:
  1. №6
  3. Напишіть селектор, який вибере всі абзаци, у яких title містить слово hello.
📌 Завдання:
  1. №7
  3. Напишіть селектор, який вибере всі абзаци з класом, що починається з top-.
💡 Показати підказку

Основні символи: [attr] — є атрибут, [attr="value"] — точне значення, ^= — починається з, $= — закінчується на, *= — містить.

✅ Показати відповідь
1) [title]
2) p[title]
3) p[title="hello"]
4) a[href^="http://"]
5) a[href$=".html"]
6) p[title*="hello"]
7) p[class^="top-"]