Home/ Questions/Q 8085909
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T18:17:00+00:00

Having trouble understanding. With the following css : .bloc .field:nth-last-child(2){ …some values… } and

  • 0

Having trouble understanding.

With the following css :

.bloc .field:nth-last-child(2){ ...some values... }

and the following html (well, haml) :

.bloc
    .field
    .field
    .field
    .field
    .clearfix

The .clearfix div gets counted in the selector, from this I can’t get the good .field’s div to be specifically styled.

It seems a bug to me, but I might be wrong. The same kind of problem applies for nth-child.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The big misunderstanding here is how filtering using :nth-child() works.

    .bloc .field:nth-last-child(2) means:
    “select all second-to-last elements that have the .field class that are inside a .bloc“.

    It does not mean:
    “select all second-to-last .field elements that are inside a .bloc“.

    With this understanding, you could just change your selector to .bloc :nth-last-child(3).

    However, the second paragraph of bažmegakapa’s answer makes a lot of sense. You should just remove the .clearfix element and use a different float containment technique. The “micro clearfix” is a good choice. Another option is to add overflow: hidden to .bloc.

    • 0