Дочірні та контекстні CSS селектори. Псевдокласи дочірніх елементів Як вибрати всі дочірні елементи в css

Дочірні селектори CSS - це селектори, які використовуються для застосування стилів до елементів лише в тих випадках, коли вони є дочірніми по відношенню до інших (батьківських) елементів. Як і селектори нащадків, дочірні селектори є складовими та складаються із простих селекторів (класи, ідентифікатори тощо).

І знову, якщо ви забули, що таке дочірні елементи, то згадаймо, розібравши вже знайомий вам приклад.

<тег1> <тег2>... <тег3><тег4>...

Елемент називається дочірнім по відношенню до іншого елемента, якщо він знаходиться всередині нього на першому рівні вкладеності. У нашому прикладі<тег2>і<тег3>є доньками<тег1>, а<тег4>- це донька<тег3> .

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

селектор1 > селектор2 (

Прогалини з обох сторін знака ">" можна ставити, а можна й ні, за бажанням.

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

Результат у браузері

Параграф1.

Параграф2.

У цьому прикладі вам треба звернути увагу на два моменти. Тут є три елементи, але тільки у двох з них є рамки, відступи та поля. Чому? І другий момент. Тільки перший параграф має синій колір тексту.

Internet Explorer 6.0 не розуміє дочірні селектори, тому якщо ви створюєте свій сайт з урахуванням цього старого браузера - пам'ятайте про це.

Дочірні селектори у HTML-таблицях

Багато новачків (а іноді вже й не новачків) у створенні сайтів стикаються з певними проблемами при використанні дочірніх селекторів у HTML-таблицях. Щоб ви зрозуміли, про що йдеться, давайте подивимося на таку звичайну таблицю.

А зараз питання. Як ви зробите, якщо вам знадобиться за допомогою дочірніх селекторів пройти від тега до осередків? Якщо ви вирішили написати ось так, то це не так:

table > tr > td ( властивість: значення; властивість: значення; ... )

А здогадуєтеся, чому не так? Ні? Справа в тому, що ви забули ще про один елемент - , який навіть якщо не вказано явно, все одно незримо присутній в кожній HTML-таблиці. Просто в нього немає обов'язкових тегів, що відкривають і закривають, тому про нього часто забувають. До речі так, у HTML-підручникуми його з вами не проходили, тому що насправді його явна вказівка ​​рідко коли потрібно. Ну, думаю, ви вже здогадалися, яка буде правильний запис, але я вам все ж таки покажу.

table > tbody > tr > td ( властивість: значення; властивість: значення; ... )

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

Домашнє завдання.

1. Встановіть на сторінці шрифт Arial розміром 0.9em і будь-який фон.
2. Напишіть на сторінці кілька заголовків і параграфів, змініть розмір і колір тексту заголовків так, як вважаєте за потрібне.
3. Зробіть так, щоб посилання безпосередньо у параграфах сторінки були синього кольору без підкреслення. Але при цьому, якщо посилання додатково обрамляються будь-яким тегом, наприклад, для курсиву, то вони повинні відображатися вже з підкресленням і червоного кольору. Ще раз загострюю вашу увагу на тому, що не треба прописувати стилі посилань з кожним тегом, що обрамляє окремо, зробіть універсально. Як? Подумайте.
4. Створіть невелике меню в правій частині сторінки і зафіксуйте його, для цього вам знадобиться властивість і ще кілька супутніх йому властивостей, там розберетеся. Нехай меню не тільки залишається на місці в межах вікна браузера, але і при скролінгу не наповзає на вміст сторінки.

Думаю останній пунктуроку буде для вас найскладнішим, але не намагайтеся відразу повністю поринути в освоєння позиціонування. Просто зробіть домашнє завдання. До речі, цей пункт не працюватиме в Internet Explorer 6.0, оскільки дідок не розуміє фіксоване позиціонування.

Я думаю, що багато хто знає про контекстних селекторах у 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;)» перестає діяти і ділянка тексту "курсивом" буде червоним.

Основне завдання даного селектора випливає з його назви та полягає у зверненні до дочірнього елемента. Виводиться за допомогою елементарного знака ">", який пов'язує дочірній елемент з елементом батька. Також варто зазначити, що у використанні прості селектори. Як приклад розглянемо таке кодування:

Element > ul ( padding- top: 20px; )

Дане кодування означає, що до списку, який вкладено в element, буде застосовано внутрішній відступ 20 пікселів від верхнього краю. Наявність цього запису значка «>» показує, що правило застосовується лише до списків першого рівня вкладеності.

Докладний аналіз роботи селектора дочірнього елемента

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

Наочніше оцінити роботу оператора дочірнього селектора допоможе наступний приклад:

Div > р (color: #ff0000; /* червоний */ )

< div>Цей рядок буде мати за промовчанням чорний текст.< span>Цей рядок перефарбуватися в червоний через те, що р є дочірнім тегом для дива. < p>Знову бачимо чорні літери.< span>Тут ми бачимо також чорні символи, тому що для цього спана батьком є ​​тег р.

Цей приклад підтверджує роботу оператора дочірнього селектора відповідно до ступеня вкладеності.

Обмеження для використання оператора дочірнього селектора

Треба зауважити, що дана операціяпідтримується всіма браузерами окрім легендарного Internet Explorer 6. Думаю, мало хто використовує даний браузер, проте якщо такі унікуми є, то для них існує вихід із ситуації, який буде описаний в окремій статті.

Навіщо застосовується

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

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

Main > header ( /* оформлення відноситься лише до головного хедеру */ }

Даний приклад справедливий у випадках, коли тег header використовують виділення заголовків статей. У нашому випадку ми задаємо оформлення тільки основному хедеру, і не зачіпаємо другорядні. Цей прийом також дозволяє уникати застосування зайвого разу ідентифікаторів, що полегшує вагу CSS-файлу і робить його більш читабельним.

Підбиваючи підсумки

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

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

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

У попередній статті ми розповідали про родинні зв'язки між елементами HTML-документа, у тому числі і про дочірні елементи. Давайте подивимося на прикладі, як ці зв'язки можна використовувати у CSS.

Уявіть, що вам потрібно присвоїти стиль лише тим тегам

Які є дочірніми по відношенню до , не торкаючись інших

(наприклад,

Дочірні стосовно