Assign five-to-five property

Question

Assign five-to-five property

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

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

Only, when the element is the fifth, ie = 5, I want it 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;
}

Ok, this is working perfectly, but what about element 10, 15, 20? I would not like to have to put a , in my CSS and repeat ownership, has an easier way? Is there a sum for this? that works pro IE8

css

asked by anonymous 09.12.2014 / 17:57

2 answers

1

Hello, just do the way below that 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; }

09.12.2014 / 18:06

How to create a graph where the values presented in it will be in the DB How to compare all the positions of an array in PHP [closed]

score 3 · Accepted Answer

Considering its edition: in IE8 there is no solution in pure CSS. You will either have to enter the number of list items in your rules, or use JavaScript. Below is a 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 visualize (using <ol> and changed 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>