N-th child selector with class names not being considered?

Question

I have a list of photos as such:

<ul class="gallery">
    <li class="red"><img src="red.png" alt=""></li>
    <li class="blue"><img src="blue.png" alt=""></li>
    <li class="blue"><img src="blue.png" alt=""></li>
    <li class="red"><img src="red.png" alt=""></li>
    <li class="green"><img src="green.png" alt=""></li>
    <li class="green"><img src="green.png" alt=""></li>
    <li class="green"><img src="green.png" alt=""></li>
    <li class="blue"><img src="blue.png" alt=""></li>
    <li class="blue"><img src="blue.png" alt=""></li>
    <li class="green"><img src="green.png" alt=""></li>
    <li class="green"><img src="green.png" alt=""></li>
    <li class="green"><img src="green.png" alt=""></li>
</ul>

Corresponding CSS as follows:

.gallery {
    list-style-type: none;
    li {
        float: left;
    }
    .red {
        width: 100%;
        margin-bottom: 2%;
    }
    .blue {
        width: 49%;
        margin-right: 2%;
    }
    .green {
        width: 32%;
        margin-right: 2%;
    }
    .blue:nth-child(2n) {
        margin-right: 0;
    }
    .green:nth-of-type(3n) {
        margin-right: 0;
    }
}

Here is a picture to illustrate this:

Every second blue element do not need a margin-right to fit the grid properly. Similarly, every third green element doesn't need a margin-right.

I tried to target them using the n-th child selector above which doesn't seem to do the trick. The second element in the list is actually the first .red element which is being set to margin-right: 0;

It seems like the class name is being overriden by the selector. Maybe the class names aren't considered and I know I can group the red items in a div and target them but that's not a solution as the list is being generated dynamically and I would like to keep its structure.

Basically, the user will be able to upload as much photos as he like in the grid with a structure as follows:

If he decides to upload a blue picture, the next picture has to be blue as well to fit the grid.
If he uploads a green picture, the next two pictures have to be green as well to fit the grid.

Any ideas on how to solve this?

It is working fine here. http://jsfiddle.net/sureshponnukalai/dzobxgk4/. Just format to normal CSS instead of SCSS. — Suresh Ponnukalai, Aug 08 '14 at 07:46
Thanks for you reply @SureshPonnukalai but unfortunately, it's not. If you check your fiddle (http://jsfiddle.net/sureshponnukalai/dzobxgk4/) against the photo above http://imgur.com/Bp1cyrH, it's not working right. What I want is exactly like the photo above. The second blue element in the list should have a margin-right of 0. Not the first one like in your case. — , Aug 08 '14 at 07:54

score 1 · Accepted Answer · answered Aug 08 '14 at 08:38

nth-child(2) will select every other element in your ul, and nth-of-type(2) will select every other li element in your ul. Unfortunately, what you are trying to do is impossible using CSS only, you can't select every other element with a specific class.

You need to change your HTML, for example - when you generate your list, count the number of blues and give every other "no-margin" class, and do the same for every third green.

N-th child selector with class names not being considered?

1 Answers1