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

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

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

Container p (
color: red;
}

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

Container > p (
color: red;
}

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

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

Здрастуйте, шановні читачі! Продовжуючи тему CSS селекторів, хочу запропонувати вашій увазі опис дочірніх та контекстних селекторів, а також їх порівняльний аналіз, оскільки за логікою застосування вони дуже схожі, хоча мають деяку відмінність.

У своїх публікаціях я досить докладно зупинявся на різних видах селекторів CSS: ; а також . До речі, в останній статті, де розбиралися різні види селектора атрибута, я досить докладно описав, як мої теоретичні викладки можна відразу перевірити, вносячи зміни в HTML і CSS код онлайн за допомогою вбудованого інструменту Google Chrome (). Такі засоби редагування мають новітні модифікації всіх популярних браузерів, включаючи Firebug для Firefox ().

Теоретичний матеріал цього посту ви можете вивчати, роблячи редагування будь-якої сторінки будь-якого сайту! Для цього просто натисніть F12, якщо використовуєте Google Chrome або Mozilla Firefox (). А тепер представлю зміст тега p, на прикладі якого вивчатимемо дочірні та контекстні CSS селектори:

Цей абзац включає теги форматування em та strong, які виділяють текст жирнимі курсивом.

Користуючись вищеописаним інструментом для редагування, я вставив цей абзац прямо в цю статтю, вписавши відповідний текст у лівій частині вікна для редагування, внаслідок чого текст цього параграфа з'явився на самому верху сторінки:

Ця HTML конструкція,. Цей параграф буде піддослідним у сьогоднішній публікації, на його прикладі я покажу, як змінюється оформлення його тексту, залежно від того, які селектори – дочірні чи контекстні – використовуються у правилі CSS.

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

Така конструкція ще називається деревом елементів. На цьому малюнку наочно представлена ​​вкладеність контейнерів, що передбачає ієрархічні відносини між тегами. Тег абзацу p є дочірнім елементом по відношенню. У той же час тег strong не є дочірнім для div, тому що міститься в контейнері p.

Дочірній CSS селектор

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

Стиль буде застосований до Селектора 2, але тільки в тому випадку, якщо він є дочірнім для Селектора 1. Розберемо докладніше, використовуючи наведений вище скріншот із деревом елементів. Наприклад, слідуючи синтаксису, можна встановити таке правило:

em (color: green;)

Це правило впливатиме на останнє слово абзацу “курсивом”, оскільки саме воно укладено між відкриваючим та закриваючим тегами em. Тег em є дочірнім для p, тому що розміщується безпосередньо всередині нього, отже текст змісту, саме слово “курсивом” буде пофарбоване в зелений колір.

Однак інше тег em не є прямим нащадком тега p, оскільки входить до складу тега strong, внаслідок чого частина абзацу "теги форматування em і strong" не буде забарвлена.

Контекстний селектор CSS

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

Якщо для того, щоб CSS правило було б застосовано, дочірній селектор повинен обов'язково перебувати безпосередньо всередині батьківського елемента (перший рівень вкладеності), то для контекстного селектора це зовсім неважливо і може бути застосований будь-який рівень вкладеності, однаково властивості елемента будуть передані від батька. При цьому синтаксис такий:

Як бачимо, контекстний селектор складається із простих селекторів, розділених пробілом. Для контекстних селекторів допускається застосовувати два і більше вкладених один одного тега. Складемо тепер CSS правило для випробуваного параграфа, який я наводив вище:

P em (color: green;)

Як бачите, зеленим забарвлений не тільки текст частини змісту абзацу, який безпосередньо укладено в тег форматування em, тобто слово "курсивом", а й ділянку тексту іншого тега em, який входить ще й до складу тега strong. Це сталося тому, що діє правило з контекстним селектором, для якого не важливим є рівень вкладеності на відміну від дочірнього селектора. У цьому є принципова різниця дочірнього і контекстного селектора.

Розглянемо ще один приклад взаємодії контекстних та дочірніх селекторів із нашим абзацом. Пропишемо наступні правила CSS для дочірнього та контекстного селектора:

Div em (color: red;) em (color: green;)

Після цього наш абзац набуває такого оформлення:

Як бачите, шматок тексту, укладений у теги em і strong, пофарбований у червоний колір, тому що для нього справедливе правило контекстного селектора, тобто тег em укладений у контейнери strong та div, а рівень вкладеності, як уже було зазначено, не має значення .

Виникає питання: чому ж слово "курсивом", що теж є змістом em, забарвлене в зелений колір? Адже і для нього правило контекстного селектора є актуальним. Але для цієї ділянки тексту абзацу справедливе і правило дочірнього селектора, тому що воно не суперечить умові, що для дочірнього селектора елемент повинен безпосередньо входити до складу тега p.

Справа в тому, що в CSS діє закон пріоритету для CSS властивостей, що знаходяться нижче. Тобто в даному випадку правило дочірнього селектора знаходиться в документі нижче, ніж стилі CSS, прописані для контекстного селектора контейнера div. Тому слово "курсивом" стало зеленим. Якщо поміняти їх місцями, то правило «em> (color: green;)» перестає діяти і ділянка тексту "курсивом" буде червоним.