Selector - Child Selector

Chrome Devtool Selector

About

A child selector is a selector that select child element in the DOM

A child is a direct descendant. If this is not the case, you may want a descendant selector

List

child selector (>)

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”.

Example(s):

  • The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
  • The following example combines descendant selectors and child selectors:
div ol>li p

It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional whitespace around the “>” combinator has been left out.

All children element

With the * star node name selector

ul > * { /* same as ul * */
  color: blue;
}
<ul>
  <li>1</li>
  <li>2</li>
</ul>

first-child

Nothing to to with child, it select the first element in a list

Example:

  • first child of a list of anchor
a:first-child {
  color:green;
}
<a href="#">First link</a> 
<a href="#">Second link</a> 
  • first child of a node
div > *:first-child {
  color:green;
}
<div>
    <div>First Node</div> 
    <a href="#">Second Node</a> 
</div>

last-child

Select the last element in a list

Example:

  • last a
a:last-child {
  color:green;
}
<a href="#">First link</a> <a href="#">Last link</a> 
  • Complex List formatting
ul li:not(:last-child)::after {
  content: ';';
}
ul li {
  display: inline;
}
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

nth-child

E:nth-child(xn+y) is a Tree pseudo-selector that selects in a list of E sibling, the xN+y element where N is the position element in the list.

You don't select the children of the element E.

One element

The second element in a group of siblings

  • Selects the second li in each list of child element. In our case in a ul element
/* same as li:nth-child(0n+2) */
li:nth-child(2) {
  color: blue;
}
<ul>
  <li>1</li>
  <li>2</li>
</ul>

First N element

  • First 2 elements
li:nth-child(-n+2) {
  background: blue;
  color: white;
  width:fit-content;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Every N element

  • Modulo - Selects every 2 element among any group of li siblings
li:nth-child(2n) {
  color: white;
  background: blue;
  width:fit-content;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>





Discover More
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
CSS - Top Property

The top property is a offset property that specifies how far is positioned the box from the top edge of its . It applies only if the box itself has a position value of: relative absolute or fixed...
DOM - Child Nodes of a Node

Child Nodes of an element in the dom tree Via child selector, you can select element that are child of another element. The childNodes property of an element returns a collection of child Node....
HTML - Li element (list item)

li is an element that represents a single item in a. ordered: ol list or unordered: ul list This example shows a ordered list If you want to select a li list item, you need to use a child pseudo-selector...
Chrome Devtool Selector
Has

Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes would result matching any nth-child and last-child are child selector
Chrome Devtool Selector
How can I define the actual / context element in a CSS selector ? Short Answer: the scope pseudo-class

When chaining selection with the querySelector, you may need to perform selection in the context of the actual selected node. This article shows you how to do it. The short answer is that you need to...
How to select the first child of a node element with DOM ? (Javascript examples)

This article shows you how to select the first child element. The best way to get the first child of a parent is through the child selector (>) Example: A parent, a child and a grand child...
Chrome Devtool Selector
Selector API

API A selector is a boolean expression (known also as predicate) that match against elements in a DOM tree in order to select one or several node. This API was known before as the CSS and was renamed...
Chrome Devtool Selector
Selector API - Descendant Selector

This page is the selection of descendant in the selector API. The descendant selector matches elements that are contained by (or “descended from”) another element. childdescendant The descendant...



Share this page:
Follow us:
Task Runner