CSS - selector nth-child

Question

why all elements were colored on red?

<div class="parent">
  <span>1</span>
  <p>2</p>
  <h1>3</h1>
</div>

.parent:nth-child(1) {
  color: red;
}

.parent:nth-child(2) {
  color: green;
}

.parent:nth-child(3) {
  color: blue;
}

I thought that the elements would be properly colored. span, p, h1 are the children of the element div?

Quentin · Accepted Answer · 2018-11-20 15:18:48Z

4

.parent:nth-child(1) means "An element that is the first child of its parent and which is a member of the parent class".

It won't match the span, p or h1 because they do not have class="parent".

The inherit the red colour from their parent which does have that class and is the first child in its parent.

You need a child or descendant combinator in there:

.parent > :nth-child(1)
.parent :nth-child(1)

answered Nov 20, 2018 at 15:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS - selector nth-child

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related