Css any level child

CSS Child Selector: Learn to Select the First, Second and Last Child

TL;DR – The > symbol creates a CSS child selector used for finding the direct children of elements.

Contents

What child selectors are

To create a CSS child selector, you use two selectors. The child combinator selects elements that match the second selector and are the direct children of the first selector.

Operators make it easier to find elements that you want to style with CSS properties.

Creating a combinator

The CSS child selector has two selectors separated by a > symbol.

• The first selector indicates the parent element.
• The second selector indicates the child element CSS will style.

div > p < background-color: lightblue; >

Selecting the first child elements

The CSS selector using the > symbol only selects direct children. To find the first child, CSS needs to include :first-child .

The following example shows the outcome when we write p:first-child in CSS and select only the first child to style:

div > p:first-child < background-color: lightblue; >

Using CSS to select the second child

You can find a second child that has a specific type and a parent with :nth-of-type(2) .

The example below uses the :nth-of-type(2) selector from CSS to select the second child of :

div > p:nth-of-type(2) < background-color: lightblue; >

Tip: in the brackets of :nth-of-type, you specify which child you want to select.

:nth-of-type vs. :nth-child

The :nth-child() selector is very similar to :nth-of-type() . Here are the main differences:

• :nth-child() selects all specified (for instance, second) children regardless of the type of their parents.
• :nth-of-type() selects the specified children of a specific parent.

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

Finding the last child

To style the last child with CSS properties, you need to select it with the :last-child selector.

The following example chooses the last child of the element, which will be styled with the CSS background-color property.

div > p:last-child < background-color: lightblue; >

Note: at first, the elements that the :last-child selected had to have parents. Now, you can select the last child among other siblings.

Descendant selectors

Descendant selectors do not have combinators. Instead, CSS separates these selectors with a white space between them.

The descendant selector finds all descendants of a specified element regardless of their position in the DOM tree.

This example selects all descendants of :

div p < background-color: lightblue; >

General Sibling Selectors

The combinator ~ separates two selectors and selects the second element when it comes after the first element, and both selectors have the same parent.

div ~ p < background-color: lightblue; >

Adjacent sibling selectors

The + combinator separates two selectors and selects the second element when it comes immediately after the first selector, and both share a parent.

div + p < background-color: lightblue; >

CSS child selector: useful tips

• The CSS child combinator selects only direct children and goes only one level down the DOM tree. The descendant selector finds elements that are even three levels deep in the DOM.
• :last-child selector is the same as :nth-last-child(1) .

Источник

Псевдоклассы группы child

Группа этих псевдоклассов позволяет выбирать элементы не по классу или тегу, а по порядковому номеру.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.

Пример

Скопировать ссылку «Пример» Скопировано

Раскрасим в разные цвета фон у пунктов списка. Обратите внимание, что у всех пунктов списка одинаковые классы, а значит, мы не сможем обратиться к отдельным пунктам при помощи селектора по классу.

У всех пунктов списка будет синий фон:

 .list-item  background-color: #2E9AFF;> .list-item  background-color: #2E9AFF; >    Скопировать Скопировано Не удалось скопировать   

У первого пункта списка (первого дочернего элемента) будет тёмно-зелёный фон:

 .list-item:first-child  background-color: #286C2D;> .list-item:first-child  background-color: #286C2D; >    Скопировать Скопировано Не удалось скопировать   

У последнего пункта списка (последнего дочернего элемента) будет оранжевый фон:

 .list-item:last-child  background-color: #FF8630;> .list-item:last-child  background-color: #FF8630; >    Скопировать Скопировано Не удалось скопировать   

У второго пункта списка будет зелёный фон:

 .list-item:nth-child(2)  background-color: #41E847;> .list-item:nth-child(2)  background-color: #41E847; >    Скопировать Скопировано Не удалось скопировать   

У предпоследнего пункта списка будет розовый фон:

 .list-item:nth-last-child(2)  background-color: #F498AD;> .list-item:nth-last-child(2)  background-color: #F498AD; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Есть три суперпростых по своей логике работы псевдокласса из этого набора:

• :only — child — выбирает любой элемент, который является единственным дочерним элементом своего родителя. Можно имитировать аналогичное поведение следующими комбинациями: :first — child : last — child или :nth — child ( 1 ) : nth — last — child ( 1 ) , но зачем так сложно, если можно проще?
• :first — child — выбирает первый дочерний элемент в родителе.
• :last — child — выбирает последний дочерний элемент в родителе.

Псевдоклассы, несущие в себе сочетание букв nth , работают гораздо интереснее. Для их правильной работы нужно указать в скобках паттерн, по которому будут выбираться дочерние элементы.

Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:

• :nth — child ( odd ) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
• :nth — child ( even ) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.

В круглых скобках мы можем указать просто цифру. Таким образом будет выбран соответствующий этой цифре дочерний элемент. Например, :nth — child ( 3 ) выберет третий дочерний элемент, подходящий под левую часть селектора.

Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу :nth — child ( 3n ) . Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.

Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth — child ( 6n+10 ) .

Псевдокласс :nth — last — child работает абсолютно аналогично, только счёт ведётся с конца.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Часто начинающие разработчики пытаются применить эти псевдоклассы к родительскому элементу. Но тут необходимо просто запомнить, что нужно применять псевдоклассы именно к дочерним элементам, из списка которых надо выбрать. При расчёте порядкового номера дочернего элемента учитываются все соседние дочерние элементы, находящиеся на одном уровне с элементом, к которому мы применяем псевдокласс :nth — child , вне зависимости от класса и типа элемента.

💡 Не надо стесняться пользоваться калькулятором NTH. Часто не получается сразу в уме составить правильную формулу.

Источник

Селектор дочерних элементов

Комбинатор > разделяет 2 селектора, находит элементы заданные вторым селектором, являющие прямыми потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество «прыжков» до них в DOM.

Синтаксис

Пример

span  background-color: white; > div > span  background-color: DodgerBlue; > 

div> span>Span 1 в div span>Span 2 в span, который в divspan> span> div> span>Span 3. Не в div вообщеspan> 

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 10 окт. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to Select All Child Elements Recursively in CSS

A child selector matches all child elements of a specified element. It is composed of two or more selectors that are separated by «>».

A child selector has the following syntax:

This syntax selects all child elements. If you want to select child elements recursively, use the syntax below.

First, we’ll explain how to select all child elements.

Create HTML

div> span>Paragraph 1 span> span>Paragraph 2 span> p> span>Paragraph 3 span> p> div> span>Paragraph 4 span> span>Paragraph 5 span>

Add CSS

• Add the display property set to «block» for all the elements.
• Add a child selector and set the background-color property.

span < display: block; > div>span < background-color: #9ba2a3; >

Example of selecting all child elements:

html> html> head> title>Title of the document title> style> span < display: block; > div > span < background-color: #9ba2a3; > style> head> body> div> span>Paragraph 1 span> span>Paragraph 2 span> p> span>Paragraph 3 span> p> div> span>Paragraph 4 span> span>Paragraph 5 span> body> html>

Result

Now, we’ll discuss another example where we select all child elements recursively. In the following example, we use the second syntax mentioned above and add background-color to the div class. The asterisk (*) matches any element.

Example of selecting all child elements recursively:

html> html> head> title>Title of the document title> style> span < display: block; > div.example, div.example > * < background-color: #9ba2a3; > style> head> body> div class="example"> span>Paragraph 1 span> span>Paragraph 2 span> p> span>Paragraph 3 span> p> div> span>Paragraph 4 span> span>Paragraph 5 span> body> html>

Источник