Assign ownership of five out of five elements

Question

I have a gallery that will repeat, every five photos, it jumps down.

Only when the element is the fifth, or =5, I want you to apply a margin-right=0. My HTML:

<ul class="galeria">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

My CSS:

.galeria li:first-child + li + li + li + li + li {
    margin-right: 0!important;
}

Okay, this is working perfectly, but what about when it’s element 10, 15, 20? I wouldn’t want to have to put a , in my CSS and repeat the property, there is an easier way? there is sum for it? that works pro IE8

Answer 1

Considering your editing: in IE8 there is no solution in pure CSS. You will have to cast the number of list items in your rules, or use Javascript. Below, CSS solution for modern browsers.

For this you use the pseudo-class nth-child:

.galeria :nth-child(5n) {
    margin-right: 0 !important;
}

A simpler example to view (using <ol> and changed the color every 5 items):

.galeria :nth-child(5n) {
    color: red;
}

<ol class="galeria">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Answer 2

Hello, just do as below you will get what you want.

.galeria li:nth-child(5n) {
    margin-right: 0!important;
}  

For IE8, you can use JQUERY

$('.galeria li:nth-child(5n)').addClass('semMargem');

.semMargem{ margin-right: 0!important; }