Question

hello i have like 6 thumbail who have same class for each thumbnails. i want the 2nd,5th to have margin-left:36px; and the 3nd and 6th to have 83px.

so i write css like this

.commitee-members{
  margin:10px 15px;
}
.commitee-members-outers:nth-child(3n+2) .commitee-members{
    margin-left: 36px;
}
.commitee-members-outers:nth-child(3n+3) .commitee-members{
    margin-left: 83px;
}

i dont know why, but the 5th class got margin-left:83px and he 6th class didnt have margin-left:83px. so i check with some exercise but this time its work heres my case

https://jsfiddle.net/bheoqL9e/1/

as you can see, its messed up

but on this exercise https://jsfiddle.net/crgruyu3/ its work, please help

Answer 1

There are 8 children within that element: 3 .commitee-members-outers, 1 .clearfix, 3 .commitee-members-outers, 1 .clearfix. All of these elements are counted for the selector.

You could use different tags for the .clearfix elements and use :nth-of-type to count only the .commitee-members-outers.

<body>
  <div class="commitee-members-outers"></div>
  <div class="commitee-members-outers"></div>
  <div class="commitee-members-outers"></div>
  <hr class="clearfix" />
  <div class="commitee-members-outers"></div>
  <div class="commitee-members-outers"></div>
  <div class="commitee-members-outers"></div>
  <hr class="clearfix" />
</body>

jsFiddle

Answer 2

Its because <div class="clearfix"></div> is interrupting the nth-child property. Try using other methods to align & fit the divisions.

Answer 3

This will select 3rd and 6th element in your code.

.commitee-members-outers:nth-child(4n+3) .commitee-members{
    margin-left: 83px;
}

nth child using formula

3 个答案: