Дочірні селектори. Дочірні та контекстні CSS селектори Css вибрати дочірні елементи

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

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

перший абзац

другий абзац

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

Container p (
color: red;
}

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

Container> p (
color: red;
}

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

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

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

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

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

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

Які є дочірніми по відношенню до , Не зачіпаючи інші

(Наприклад,

Дочірні по відношенню до

).
Як це зробити? Дуже просто: створимо дочірній селектор:

Body> p (color: # 333;)

Зверніть увагу на символ> після body. За допомогою нього ви вказуєте, що стиль застосовується виключно для дочірніх тегів

батька . Якщо символ прибрати, то стиль застосується абсолютно до всіх тегам

Які знаходяться всередині тега , Хоча вони можуть і не бути для нього дочірніми.

додаткові псевдокласи

В CSS3 існує ряд псевдокласів для роботи з дочірніми елементами. Нижче наведено опис кожного з них, приклади використання, а також відмінності між псевдоклас виду «child» і «of-type».

: First-child - за допомогою цього псевдокласу можна застосувати стиль до зазначеного елементу веб-сторінки, за умови, що він є першим
: Last-child - стиль застосовується до зазначеного елементу веб-сторінки за умови, що він є останнімдочірнім елементом свого батька;
: Nth-child - дозволяє вибрати парні (even) і непарні (odd) дочірні елементи; також за допомогою даного псевдокласу можна стилізувати чергуються дочірні елементи, використовуючи вирази виду an + b і числа;
: Only-child - застосовується до дочірньому елементу за умови, що той є єдинимдитиною у батьків;
: First-of-type - стиль застосовується до першого елемента зазначеного типу(Навіть якщо цей елемент не є першим дочірнім для свого батька і над ним знаходяться інші дочірні елементи інших типів);
: Last-of-type - працює точно так само, як і попередній псевдоклас, з тією лише різницею, що стиль застосовується до останньому елементу зазначеного типу;
: Nth-of-type - за принципом роботи схожий на: nth-child, але орієнтується на типелемента;
: Only-of-type - застосовується до дочірньому елементу зазначеного типу за умови, що той є у батька єдиною дитиною свого типу.

Приклад використання: first-child,: last-child і: nth-child

перша дитина

Друга дитина

третя дитина

непарний номер

парний номер

непарний номер

парний номер

остання дитина

/ * CSS * / p: first-child (font-weight: bold; text-transform: uppercase;) p: last-child (font-style: italic; font-size: 0.8em;) p: nth-child ( 3) (color: red;) tr: nth-child (odd) (background-color: # A2DED0;) tr: nth-child (even) (background-color: # C8F7C5;) Скріншот: застосування: first-child, : last-child і: nth-child

Ми написали CSS стиль для дочірніх елементів простого HTML-документа, де тег

є батьком для тегів

. Розберемо CSS по порядку.

Перше правило - p: first-child - стосується елемента p: якщо він є першим дочірнім елементом свого батька, То до нього застосовується стиль (в нашому випадку це жирний шрифт і перетворення тексту в верхній регістр). Якщо в даний HTML-код відразу після відкриваючого тега

додати ще який-небудь тег (наприклад,

), То стиль p: first-child вже не буде доступний широкому, оскільки
Перестане бути першим дочірнім тегом. В даному випадку першим дочірнім елементом буде h2.

Все те ж саме відбувається і з правилом p: last-child - стиль CSS буде застосований до тегу
Лише тоді, коли він буде останнім дочірнім елементом свого батька. додайте після
Будь-який інший тег відмінного типу і ви побачите, що правило p: last-child перестане застосовуватися.

Правило p: nth-child (3) працює для третьогодочірнього тега
(Про це свідчить кількість 3 в дужках). Колір шрифту для цього абзацу стає червоним. Ви можете змінити число 3 (наприклад, на 2) і подивитися результат.

Правила tr: nth-child (odd) і tr: nth-child (even) працюють для непарних і парних елементів tr відповідно. Ви можете побачити результат на скріншоті, а також скопіювати весь код і поекспериментувати зі стилями самостійно.

Приклад використання: first-of-type,: last-of-type,: nth-of-type і: only-of-type

перша дитина

Друга дитина

третя дитина

четверта дитина

п'ята дитина

остання дитина

/ * CSS * / p: first-of-type (color: violet; text-transform: uppercase;) p: last-of-type (font-style: italic; font-size: 0.8em;) p: nth- of-type (3) (color: red;) p: nth-of-type (odd) (background-color: # A2DED0;) p: nth-of-type (even) (background-color: # C8F7C5;) h3: only-of-type (text-decoration: underline;)
Скріншот: застосування: first-of-type,: last-of-type,: nth-of-type і: only-of-type

Перше правило CSS, яке ви бачите - це p: first-of-type. Що воно робить? Воно вибирає дочірній елемент типу p, який першимзустрічається у батька. І не важливо, на якому місці серед елементів інших типів знаходиться даний тег - на першому, другому або десятому. В цьому і полягає відмінність між псевдоклас: first-child і: first-of-type.

Друге правило - p: last-of-type - застосовує стиль до останньомудочірньому елементу типу p. Як видно з HTML-коду, після останнього тега

Є ще й тег

, Присутність якого ніяк не впливає на виконання CSS-правила (на відміну від варіанту з: last-of-child).

Наступне правило - p: nth-of-type (3) - змінює колір шрифту на червоний. Застосовується цей стиль до тегу
Котрий є третімза рахунком елементом свого типу у батька. На скріншоті ви бачите, що червоний колір застосовується до тегу
Який за фактом є п'ятою дитиною тега
. Але якщо не брати до уваги елементи інших типів, то виходить, що тег
З червоним шрифтом знаходиться на третьому місці (серед тегів свого типу). Таким чином працює дане правило.

Правила p: nth-of-type (even) і p: nth-of-type (odd) працюють аналогічно: оскільки перед двокрапкою вказано ім'я p, то вибираються парні і непарні дочірні елементи типу p і фарбуються в задані кольору. Інші елементи пропускаються.

Останнє правило - h3: only-of-type - застосовується до вмісту тега
, Роблячи текст підкресленим. Даний стиль працює лише тому, що тег
є єдинимдочірнім елементом свого типу. Якщо в HTML-код додати ще один тег
, Стиль не буде застосований.

висновки

Дочірній селектор CSS дозволяє змінити стиль дочірнього елемента HTML-документа, виходячи з того, хто є його батьком.

За допомогою додаткових псевдокласів: first-child,: last-child,: nth-child,: only-child можна стилізувати дочірні елементи HTML-документа, орієнтуючись на їх місце розташування, нумерацію в дереві елементів.

Псевдокласи: first-of-type,: last-of-type,: nth-of-type,: only-of-type дозволяють застосовувати стиль до дочірнім елементам HTML-документа, орієнтуючись на їх тип, а також на нумерацію в дереві елементів .

Останнє оновлення: 21.04.2016

Особливу групу псевдокласів утворюють псевдокласи, які дозволяють вибрати певні дочірні елементи:

: First-child: представляє елемент, який є першим дочірнім елементом

: Last-child: представляє елемент, який є останнім дочірнім елементом

: Only-child: представляє елемент, який є єдиним дочірнім елементом в якомусь контейнері

: Only-of-type: вибирає елемент, який є єдиним елементом певного типу (тега) в якомусь контейнері

: Nth-child (n): представляє дочірній елемент, який має певний номер n, наприклад, другий дочірній елемент

: Nth-last-child (n): представляє дочірній елемент, який має певний номер n, починаючи з кінця

: Nth-of-type (n): вибирає дочірній елемент певного типу, який має певний номер

: Nth-last-of-type (n): вибирає дочірній елемент певного типу, який має певний номер, починаючи з кінця

Псевдоклас first-child

Використовуємо псевдоклас first-child для вибору перших посилань в блоках:
Селектори в CSS3
Планшети

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL

смартфони

Топ-смартфони 2016
Samsung Galaxy S7
Apple iPhone SE
Huawei P9

Стиль по селектору a: first-child застосовується до заслання, якщо вона є першим дочірнім елементом будь-якого елементу.

А в другому блоці першим елементом є параграф, тому ні до однієї засланні не застосовується стиль.

Псевдоклас last-child

Використовуємо псевдоклас last-child:
Селектори в CSS3
смартфони

Samsung Galaxy S7
Apple iPhone SE
Huawei P9

Планшети

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL
Дані за 2016

Селектор a: last-child визначає стиль для посилань, які є останніми дочірніми елементами.

У першому блоці якраз останнім дочірнім елементом є посилання. А ось у другому останнім дочірнім елементом є параграф, тому в другому блоці стиль не застосовується ні до однієї з посилань.

Селектор only-child

Селектор: only-child вибирає елементи, які є єдиними дочірніми елементами в контейнерах:
Селектори в CSS3
Заголовок

текст1

Текст2

Текст3

Текст4

Параграфи з текстами "Текст1" і "Текст4" є єдиними дочірніми елементами в своїх зовнішніх контейнерах, тому до них застосовується стиль - червоний колір шрифту.

Псевдоклас only-of-type

Псевдоклас only-of-type вибирає елемент, який є єдиним елементом певного типу в контейнері. Наприклад, єдиний елемент div, при цьому елементів інших типів в цьому ж контейнері може бути скільки завгодно.
Селектори в CSS3
Header

Єдиний параграф і елемент спан

Footer

Хоча для елементів div визначено стиль, він не буде застосовуватися, так як в контейнері body знаходиться два елементи div, а не один. Зате в body є тільки один елемент p, тому він отримає стилізацію. І також в контейнері p є тільки один елемент span, тому він також буде стилізований.

Псевдоклас nth-child

Псевдоклас nth-child дозволяє стилізувати кожен другий, третій елемент, тільки парні або тільки непарні елементи і т.д.

Наприклад, стилізуємо парні і непарні рядки таблиці:
Селектори в CSS3
смартфони

Samsung	Galaxy S7 Edge	60000
Apple	iPhone SE	39000
Microsoft	Lumia 650	13500
Alcatel	Idol S4	30000
Huawei	P9	60000
HTC	HTC 10	50000
Meizu	Pro 6	40000
Xiaomi	Mi5	35000

Щоб визначити стиль для непарних елементів, в селектор передається значення "odd":

Tr: nth-child (odd) ()

Для стилізації парних елементів в селектор передається значення "even":

Tr: nth-child (even) ()

Також в цей селектор ми можемо передати номер стілізуемий елемента:

Tr: nth-child (3) (background-color: #bbb;)

В даному випадку стилизуется третій рядок.

Ще одну можливість представляє використання замінника для номера, який виражається буквою n:

Tr: nth-child (2n + 1) (background-color: #bbb;)

Тут стиль застосовується до кожної другої непарної рядку.

Число перед n (в даному випадку 2) представляє той дочірній елемент, який буде виділений таким. Число, яке йде після знака плюс, показують, з якого елемента потрібно починати виділення, тобто, +1 означає, що потрібно починати з першого дочірнього елемента.

Таким чином, в даному випадку виділення починається з 1-го елемента, а наступним виділяється 2 * 1 + 1 = 3-й елемент, далі 2 * 2 + 1 = 5-й елемент і так далі.

Наприклад, якщо ми хочемо виділити кожен третій елемент, починаючи з другого, то ми могли б написати:

Tr: nth-child (3n + 2) (background-color: #bbb;)

Псевдоклас: nth-last-child по суті надає ту ж саму функціональність, тільки відлік елементів йде не з початку, а з кінця:

Tr: nth-last-child (2) (background-color: #bbb; / * 2 рядок з кінця, тобто передостання * /) tr: nth-last-child (2n + 1) (background-color: #eee ; / * непарні рядки, починаючи з кінця * /)

Псевдоклас nth-of-type

Псевдоклас: nth-of-type дозволяє вибрати дочірній елемент певного типу за певним номером:

Tr: nth-of-type (2) (background-color: #bbb;)

Аналогічно працює псевдоклас nth-last-of-type, тільки тепер відлік елементів йде з кінця:

Tr: nth-last-of-type (2n) (background-color: #bbb;)

Виконувана завдання - вибір дочірніх елементів.
Позначення - ланцюжок: простий селектор батька, комбінатор «>», простий селектор дочірнього елемента.
Приклад використання:

Задамо відступ зліва для списку, безпосередньо вкладеного в елемент з класом content (на списки другого рівня вкладеності ці правила не подіють):

Content> ul (margin-left: 20px;)

Детальніше про селектор дочірнього елемента

Основна відмінність селектора дочірнього елемента від розглянутого раніше - той факт, що якщо селектор нащадка вибирає все нащадки, незалежно від рівня вкладеності, то селектор дочірнього елемента вибирає нащадків тільки першого рівня - тобто безпосередньо вкладені елементи. Наприклад, напишемо такий:

Div> span (color: # 555; / * сірий колір * /)

... і такий код:

Цей текст буде чорного кольору. А цей сірого, адже цей span - дочірній елемент для div.

Тут знову чорний текст. І цей текст теж чорний, так як цей span НЕ дочірній для div. Його безпосередній батько - тег p.

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

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

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

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

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

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

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

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

дочірні селектори

Параграф1.

Параграф2.

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

Параграф1.

Параграф2.

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

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

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

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

осередок 1.1	осередок 1.2
осередок 2.1	осередок 2.2

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

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

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

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

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

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

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

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