Css selector child element

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) .

Источник

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

Комбинатор > разделяет 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.

Источник

CSS Child Selector Tutorial

In this section, we will learn what the child selector is and how to use it in CSS.

Child Selector in CSS

The child selectors are a set of methods we use to access one or more children of an HTML element and apply CSS styles to them.

For example, using child selectors, we can access to the first or last child of an element and format it accordingly. Or let’s say and element has both children and grandchildren, now using the child selectors, we can focus on the children of an element only (skip the grandchildren) and format them accordingly.

So in short, the child selectors are here to ease the process of accessing the children of an element and help us to apply CSS styles to them.

CSS Direct Child Selector:

The first child selector is called direct child selector and it is used to target the direct children of an HTML element.

Note that this selector won’t care about the grandchildren of the target element (basically, it will skip them).

For example, let’s say you have the element and it has 3 children. Now each of these elements also has other children for themselves as well! Now, if we use the direct child selector on the element, only the elements of the will be targeted here and so the children of these elements will be ignored.

Direct Child Selector in CSS Syntax:

`element`: this is the parent element we want to select its children.

`child-element`: this is the name of those direct children of an element we want to style using CSS. For example, if the value here is set to `.cla` then the selector will target all the direct children of the parent element that has the class name `cla` assigned to them.

Example: using direct child selector in CSS

CSS Descendant Child Selector:

This type of selector targets the children and the grandchildren (all the descendant children) of an element

Descendant Child Selector in CSS Syntax:

parent-element child-element < //body. >

`parent-element`: this is the element we want to style its descendant children.

`child-element`: this is the element/s that are the descendant of the target `parent-element` and want to style them using CSS properties.

Example: using descendant child selector in CSS

CSS Pseudo Class: first-child

Using this selector, we can target the first child of an element and apply CSS styles to it.

For example, if there’s a element and its first child is the element, we can use this selector to target that element and style it accordingly.

This is the syntax of this selector:

Here, the element-name is the one we want to access its first child and change its styles.

Example: using ::first-child pseudo class in CSS

CSS Pseudo Class: last-child

This type of selector is used to access the last child of an element and style that using CSS properties.

This is the syntax of this selector:

The `element-name` here is the name of the target element we want to style its last child.

Example: using ::last-child pseudo class in CSS

CSS Pseudo Class: only-child

When we want to apply a style to an element that is the only child of its parent, we can use this type of selector.

Example: using ::only-child pseudo class in CSS

CSS Pseudo Class: nth-child()

When we want to apply a style to an element that is the nth child of its parent, we can use this type of selector

CSS Pseudo Class nth-child() Syntax:

element-name:nth-child(number)< //body… >

Here the `element-name` is the name of the element we want to target one of its children and style it.

`:nth-child(number)`: The number we set in the pair of parentheses defines the child element we want to style. For example, if the value is set to 3, that means the third child of the target element is the target of this selector then.

Here, the target element we want to style is the third child of an element that has the id value of #purp.

Example: using ::nth-child() pesudo class in CSS

nth-child() Pseudo Class with “odd” and “even” values:

There are two special words we can put within the pair of parentheses of the `nth-child()` selector:

• “odd”: this value means the target of the selector will be those children of an element that have an odd position. For example, the first element, the third element, the fifth element, and so on.
• “even”: this value means the target of the selector will be those children of an element that have an even position. For example, the second element, the fourth element, the sixth element, and so on.

Example: using “odd” and “even” values in nth-child() pseudo class

nth-child() Pseudo Class with “xn” Values

Using this type of selector, we can define a step and target the children of an element based on this step! For example, we can set the value to 3, which means skip 2 child elements at a time and add the next one as the target element of the selector.

Example: nth-child() with “xn” values

nth-child() Pseudo Class with “xn + numbers”

The `nth-child()` selector by default starts from the first child of an element, but we can change this position and make the selector to start from another child of an element.

This means the start position of this selector must be the third child element of the target parent element.

Example: nth-child() class with “xn + numbers”

nth-child() Pseudo Class with Negative Numbers

We can also use a negative number for ‘n’ as the value of the selector of this type.

For example, if we set the value to -3n + 5, browsers will cycle through child elements backwardly, starting from fifth child, trying to find every third element.

Example: negative numbers and nth-child() pseudo class

CSS Pseudo Class: first-of-type

If we want to format those elements that are the first type within the body of their container (parent) we can use this type of selector.

Note: We are looking for “first type” in this type of selector. So don’t confuse it with “first-child” because a first-type might be the nth child of its parent.

Here, browsers will check the entire elements of the page to see if they have a

element as their children. Now, if they found one, the first sub-element of those parent elements that are of type

, will be styled according to the declaration block of this selector.

Example: using ::first-of-type pseudo class in CSS

CSS Pseudo Class: last-of-type

If we want to format those elements that are the last type within the body of their container (parent) we can use this type of selector.

Note: We are looking for “last type” in this type of selector. So don’t confuse it with “last-child” because a last-type might be the nth child of its parent.

Here, browsers will check the entire elements of the page to see if they have a

element as their children. Now, if they found one, the last sub-element of those parent elements that is of type

, will be styled according to the declaration block of this selector.

Example: using ::last-of-type pseudo class in CSS

CSS Pseudo Class: nth-of-type

If we want to format those elements that are the nth type within the body of their container (parent) we can use this type of selector.

Here’s the syntax of this type of selector:

Источник