CSS-селектори та їх види

Використання каскаду

При використанні в HTML CSS селекторів по id можна також використовувати властивість каскадного. Наприклад, якщо всередині тега з ідентифікатором потрібно вибрати якийсь дочірній тег і змінити його властивості, спочатку потрібно записати ім’я ідентифікатора з решіткою, потім дочірній тег і його властивості. Такі селектори називаються вкладеними. Тобто рядок коду буде виглядати приблизно так: «#id p {color: blue}». Тоді всередині батьківського елемента з цим ідентифікатором у дочірнього абзацу колір тексту зміниться на синій.

Використання селекторів дочірніх елементів

Ще один варіант використання каскаду для зміни властивостей дочірніх елементів використовується, якщо потрібно вибрати тільки певну частину коду. Його також називають селектором нащадків. Наприклад, щоб вибрати абзац всередині якийсь рядки таблиці, використовується наступна запис CSS селектора: «ul li > p: {color: blue}». Варто звернути увагу на те, що чим довший запис, тим вище ймовірність, що вийде змінити якесь конкретне властивість елемента, так як він стає більш пріоритетним для каскаду. Наприклад, елементи з якимось іншим властивістю CSS-селектора по класу, який є батьківським, не змінить свої властивості повністю. Перефарбується тільки певна частина тексту всередині списку.