Урок 71 із 239
30%
← Назад

Практика на комбінації CSS селекторів

Практичні завдання для закріплення роботи із селекторами тегів, класів, id та групуванням селекторів.

Практика на комбінації CSS селекторів

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

📌 Завдання:
  1. №1 ⊗mkPmSlSCP
  2. Напишіть селектор, який вибере абзаци p, розташовані всередині div.
  4. №2 ⊗mkPmSlSCP
  5. Напишіть селектор, який вибере всі h2, розташовані всередині div.
  7. №3 ⊗mkPmSlSCP
  8. Напишіть селектор, який вибере всі p з елемента з id block.
  10. №4 ⊗mkPmSlSCP
  11. Напишіть селектор, який вибере всі h2 з елемента з id block.
  13. №5 ⊗mkPmSlSCP
  14. Напишіть селектор, який вибере всі елементи з класом bbb.
  16. №6 ⊗mkPmSlSCP
  17. Напишіть селектор, який вибере всі елементи з класом bbb всередині id block.
  19. №7 ⊗mkPmSlSCP
  20. Напишіть селектор, який вибере всі абзаци p з класом bbb.
  22. №8 ⊗mkPmSlSCP
  23. Напишіть селектор, який вибере всі h2 з класом bbb.
  25. №9 ⊗mkPmSlSCP
  26. Напишіть селектор, який вибере всі p.bbb всередині #block.
  28. №10 ⊗mkPmSlSCP
  29. Згрупуйте селектори та виберіть всі елементи з класами bbb і xxx.
  31. №11 ⊗mkPmSlSCP
  32. Виберіть всі p.bbb і всі h2.xxx одночасно.
  34. №12 ⊗mkPmSlSCP
  35. Виберіть p.bbb та p.xxx всередині #block.
  37. №13 ⊗mkPmSlSCP
  38. Напишіть селектор, який вибере всі елементи з класом fff.
  40. №14 ⊗mkPmSlSCP
  41. Напишіть селектор, який вибере всі p всередині елемента з класом fff.
  43. №15 ⊗mkPmSlSCP
  44. Напишіть селектор, який вибере всі p з класом fff.
  46. №16 ⊗mkPmSlSCP
  47. Напишіть селектор, який вибере всі елементи з класом bbb всередині класу fff.
  49. №17 ⊗mkPmSlSCP
  50. Напишіть селектор, який вибере всі h2.bbb всередині .fff.
💡 Показати підказку

💡 Підказка: Селектор потомків: .block p — вибирає p всередині .block. ID: #block p — вибирає p всередині елемента з id block. Клас: .bbb — всі елементи з класом bbb. Тег + клас: p.bbb — тільки абзаци з класом bbb. Групування: p.bbb, h2.xxx — вибирає обидва типи елементів.

✅ Показати відповідь
✅ Відповіді:

1.
div p


2.
div h2


3.
#block p


4.
#block h2


5.
.bbb


6.
#block .bbb


7.
p.bbb


8.
h2.bbb


9.
#block p.bbb


10.
.bbb, .xxx


11.
p.bbb, h2.xxx


12.
#block p.bbb,
#block p.xxx


13.
.fff


14.
.fff p


15.
p.fff


16.
.fff .bbb


17.
.fff h2.bbb