CSS: nth-child works bad when adding new elements

Question

I'm making a photo gallery, and I have four elements per row.

I have a margin for the space between images.

.picDesc {
   float: left;
   margin:0 1% 1% 0; /*  <--- this */
   width: 24.2%;
   text-align: center;
}

Obviously I don't need the margin for the last div on the right.

So I use nth-child for remove the margin of the fourth div.

.picDesc:nth-child(4n+4){
    margin:0 0% 1% 0;
}

And works!

But when I click on an album, for example "Altro", and show the pics of this album, the margins are wrong how you can see.

How can I resolve this?

Thanks for the help!!

Altering demo class .picDesc:nth-of-type(4n+4) to .picDesc:nth-of-type(4n+1) makes photo alignemnts looks better. — Zentoaku, Aug 14 '14 at 09:58

George · Accepted Answer · 2014-08-14T09:58:42.083

4

It's because of this element:

<div class="albumDesc"><a href="archive.php">Albums</a><p></p></div>
<!-- (Temporarily remove it and see for yourself) -->

Which nth-child() acknowledges.

Place your your <div class="picDesc"> elements in their own container and then narrow the nth-child() scope.

For example:

HTML

<div class="albumDesc"><a href="archive.php">Albums</a><p></p></div>
<div class="picDescCont">
    <div class="picDesc">..</div>
    <div class="picDesc">..</div>
    ....
</div>

CSS

.picDescCont .picDesc:nth-child(4n+4){
    margin:0 0% 1% 0;
}

Note: .picDesc:nth-child(4n+4) means every n element that has the class .picDesc, not every n element of the elements that have the class .picDesc.

edited Aug 14 '14 at 09:58

answered Aug 14 '14 at 09:52

George

36,413
9
66
103

I also suggest to add `nth-child(4n)` which will give you the needed result if you want to clear margin in every last item. – Vangel Tzo Aug 14 '14 at 09:57
You are completly right! I'm feeling so stupid, thank you very much for the help! – Gabriele Aug 14 '14 at 10:12
@Gabriele No worries! Glad to have helped :) – George Aug 14 '14 at 10:12

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

It's because nth-of-type if for the same types. So, the class albumDesc is the first div.

Unfortunately nth-of-class doens't exist.

You can change the albumDesc to a title header, so is more semantic and don't need group the divs.

<h1 class="albumDesc"><a href="archive.php">Albums</a></h1>

You must read the css3 nth of type restricted to class.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 14 '14 at 09:59

SnakeDrak

3,406
4
28
41

CSS: nth-child works bad when adding new elements

2 Answers2