Why is :nth-child applied on the childrens of childrens?

Question

@media screen and (max-width: 500px) {
  .flexed-form-wr :nth-child(1) { order: 1; }
  .flexed-form-wr :nth-child(2) { order: 3; }
  .flexed-form-wr :nth-child(3) { order: 2; }
  .flexed-form-wr :nth-child(4) { order: 4; }
}

.flexed-from-wr is a with 4 children and is supposed to change the order of them on mobile. This is working properly but one of the children also has childrens and the same code is applied to them as well. Why is this happening and how can I prevent it?

can you post your html code ? Or try using `>` here ..flexed-form-wr > :nth-child(1) — mrcoder, Nov 23 '20 at 09:22
_“Why is this happening”_ - why should it _not_ happen? A child of a child, is itself still a child. — CBroe, Nov 23 '20 at 09:31

score 2 · Accepted Answer · answered Nov 23 '20 at 09:22

If you don't want the rule to be applied on the grand children, you can use the > children operator:

@media screen and (max-width: 500px) {
  .flexed-form-wr > :nth-child(1) { order: 1; }
  .flexed-form-wr > :nth-child(2) { order: 3; }
  .flexed-form-wr > :nth-child(3) { order: 2; }
  .flexed-form-wr > :nth-child(4) { order: 4; }
}

Why is this happening?

The :nth-child() selector selects all the children that's nth child of the parent and child too.

Why is :nth-child applied on the childrens of childrens?

1 Answers1