Last class type

Question

I want to select the last of each type of class. I do not know how many list items are present, so I can not use nth-child(2), for example. Can I do this in css or do I need to add class width scripts last?

• groups 1

• group 1

  
  

• group 2

• group 2

  
  

• group 3

• groups 3

.group-1:last-of-type {
  margin-bottom: 50px;
}
.group-2:last-of-type {
  margin-bottom: 50px;
}
.group-3:last-of-type {
  margin-bottom: 50px;
}

<ul>
  <li class="group-1">Group1</li>
  <li class="group-1">Group1</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
</ul>

Run codeHide result

Answer 1

You can use the adjacent + css sibling selector .

element1 + element2means that he will select the second element element2only if he immediately follows the first element element1.

Stack fragment

.group-1+.group-2 {
  margin-top: 50px;
}

.group-2+.group-3 {
  margin-top: 50px;
}

<ul>
  <li class="group-1">Group1</li>
  <li class="group-1">Group1</li>
  <li class="group-1">Group1</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
</ul>

Run codeHide result

Link Link adjacent sibling combinator

Answer 2

You can use:: nth-child (2n) in css

li:nth-child(2n){
  margin-bottom: 50px;
}