Finding a pseudo nth-child to apply CSS changes

Question

I have a list of items that are floated left with a 20px right margin. Every 4th item does not have a right margin, therefore, the list items line up into 4 columns. I'm doing this by ussing the CSS nth-child(4n) selector for the list items

That works all fine and dandy, then I decided to apply filtering via the jquery isotope plugin, which messed things up a bit. Every 4th item still does not have right margin, but this applies to every item in the list.

What I need to do is figure out to find the 4th child on the screen, and apply the CSS rules. I'm sure this is probably done by some other java.

If showing any of the code, CSS HTML, or jQuery, would be helpful, let me know what. Any help would be greatly appreciated.

`to find the 4th child on the screen` is this without hidden elements or just not visible in available browsers size? — DaniP, Jan 28 '14 at 16:22
The filtering from isotope marks all others with a CSS element of `display:none;` — NW Tech, Jan 28 '14 at 16:30
I'd just give them each a 10px margin on each side, then do a margin-left: -10px; on the container. — Chad, Jan 28 '14 at 16:36
possible duplicate of [jquery nth child that is currently visible](http://stackoverflow.com/questions/2175694/jquery-nth-child-that-is-currently-visible) — Paulie_D, Jan 28 '14 at 16:48
@Paulie_D I did see that solution, however, it did not work, hence me asking this question. — NW Tech, Jan 28 '14 at 17:14

score 1 · Answer 1 · answered Jan 28 '14 at 16:38

1

The way with Jquery is evaluate just the :visible elements and then apply the sytle, like this:

$(document).ready(function(){
    $('div:visible').each(function (i) {
      if ((i+1) % 4 == 0) $(this).css('marginRight','0');
    });
})

You just need to change your selector and place it in the correct handler you want.

Check this Demo http://jsfiddle.net/QNDVP/.

answered Jan 28 '14 at 16:38

DaniP

37,813
8
65
74

This seems to work...almost. That class that's added stays when toggling via the isotope filters. If it's any help, here's the site: http://joebuteradesign.com/ – NW Tech Jan 28 '14 at 16:51
@NWTech this question doesn't feed your needs if you inspect the code you can see each image has an absolute position.... then margin has nothing to do with the spaces. The answer works as you see you are getting that value margin right 0 but with the position you can't do that – DaniP Jan 28 '14 at 16:54
@NWTech you may need to include this code when the function of isotope is run – DaniP Jan 28 '14 at 16:56
I think your solution might work, if there's a way to remove that `margin-right:0;`, when a filter button is clicked. – NW Tech Jan 28 '14 at 17:07
FWIW, my `
` items have a class of "projects". When I tried your suggestion, I replaced `div:visible` with `.projects:visible`, but I noticed that the `margin-right:0;` was applied to every 4th item, regardless of if it was visible or not....maybe this is because on page load, every item is shown, and when filters are toggled, the margins aren't reset?

NW Tech

Jan 28 '14 at 17:19

@NWTech is possible then you need to trigger the event also when the filters are displayed. – DaniP Jan 28 '14 at 17:40

score 0 · Answer 2 · answered Jan 28 '14 at 16:41

This is harder than it sounds.

nth-child and nth-of-type selectors do not distinguish by whether an element is visible or even by checking additional selectors (eg you can't do it by looking at the classname).

Using nth-child(4n), you will always get the fourth/eighth/etc elements that are children of the selected parent; there is no way to filter it further except by type (nth-of-type).

Using nth-of-type(4n) is the same, but filters by the element type of the selected element. (eg if you select a div, then nth-of-type(4n) will give you the 4th/8th/etc div elements in the set, ignoring any spans, etc).

There is a CSS4 selector, nth-match() which would do what you're looking for, but unfortunately it isn't supported in any browser yet, and doesn't look likely to be any time soon.

So how can we do what you want in existing browser?

The easy option is to delete the hidden elements from the DOM rather than simply hiding them. Then your existing nth-child() selector will just work. Of course this isn't ideal if you need to toggle them in and out, but it is an option.
Use Javascript rather than CSS to select the elements. Maybe toggle a classname or something on the (4n) visible elements when you change the visibility of any of them.
Look for a polyfill library that implements the nth-match() selector.

Finding a pseudo nth-child to apply CSS changes

2 Answers2