Дочірні селектори в css

Я думаю, що багато хто знає про контекстних селекторах в CSS. Вони використовуються найчастіше, проте, досвідчені верстальники прекрасно знають, що іноді контекстні селектори вносять певні проблеми. Це проблема пов`язана з тим, що в структурі елемента може бути багато однакових елементів, вкладених один в одного. І необхідно застосувати стиль не для всіх вкладених елементів, а тільки до безпосередньо дочірньому елементу. Ось для цього і використовуються Дочірні селектори в CSS.

Щоб проблема стала більш зрозумілою, давайте приведу невеликий приклад. Нехай у нас є такий HTML-код:

Відео: Відео урок 8.3 по htm Дочірні селектори

class="Container"gt; 
  
 перший абзац 
 
 другий абзац

І наше завдання зробити червоним тільки "другий абзац". Якщо ми напишемо з використанням контекстного селектора:

Відео: Курс CSS - Урок №5. селектори нащадків

.container p { 
 color: red- 
}

То у нас стануть корисним обидва абзацу, що нам зовсім не потрібно. Дане завдання дуже просто вирішується за допомогою дочірніх селекторів в CSS:

Відео: JQUERY - Урок №3 - Вкладені і дочірні селектори, следуюший тег

.container gt; p { 
 color: red- 
}

Все, тепер червоним у нас став тільки "другий абзац". Оскільки саме цей абзац є безпосередньо дочірнім для .container. А "перший абзац"Є дочірнім для внутрішнього div, таким чином, під дію дочірнього селектора він не потрапляє.

Ось так легко вирішуються такі завдання, однак, є один величезний мінус дочірніх селекторів в CSS - вони не працюють в браузерах Internet Explorer. З цієї причини, їх використання вкрай небажано. Але якщо Ви раптом десь зустрінете, то тепер Ви будете знати, що означає даний тип селекторів і що він робить.

Поділися в соціальних мережах:

Схожі