Comments on: Using nth-of-type to create grid blocks that clear

By: Ad Taylor

Ad Taylor — Tue, 25 Aug 2009 12:26:30 +0000

Used nth-of-type in jQuery before but didn’t even know t was a CSS selector. Pretty exciting, can’t wait to use it.

I guess a possible fall back for the likes of IE and older browsers could come in form of :
.block + .block + .block, .block + .block + block + .block + .block + .block { clear : both;}
It’s a horrendous alternative but if it means I can play with nth-of-type, I’m in!

By: Anna Debenham

Anna Debenham — Tue, 25 Aug 2009 11:21:41 +0000

@Ewan Yep, if you apply them to the block they can. They just work like any other divs. In the example I’ve given, I applied a 40px right margin to the first and second blocks in the row.

@Emily Thanks! Yeah, the flickr stream does look a bit funny because they’re all tilting the same way, but I’m considering using the nth-of-type to tilt some in the other direction. This site is more of a sandpit than an attempt at a good design! ;)

By: Emily Heath

Emily Heath — Tue, 25 Aug 2009 11:16:34 +0000

Wicked. Didn’t now about nth of type at all. Thanks for the demo.

(Aside: i like the 4 degrees of rotation on the profile pics for these comments. Nice touch! :) Not sure I like it so much on the RHC Flickr stream though. Seems a bit much there.)

By: Ewan

Ewan — Tue, 25 Aug 2009 11:15:09 +0000

Very interesting, I have never heard of this selector before, and something I can think of using in a few instances already.

Haven’t had a chance to play about yet, but ccan borders and the like be applied too? I’m thinking of a product listing page, where you might not want a left/right border on the first and third item.

By: Matt Wilcox

Matt Wilcox — Tue, 25 Aug 2009 11:10:38 +0000

Hehe, I’ve been playing with nth-child the last day or two too, and find the math involved less than ideal. I’d not thought of using it for a layout solution like this though, nice one.

By: Anna Debenham

Anna Debenham — Tue, 25 Aug 2009 11:00:45 +0000

@Steve – yes, writing 3n + 1 is a much better way of doing it and was just the streamlined solution I was looking for.

By: Steve Marshall

Steve Marshall — Tue, 25 Aug 2009 10:54:51 +0000

Hey Anna,

I’ve thought of doing much the same sort of thing a few times. One interesting thing about nth-of-type is that you can pass in a ‘number expression’ instead of just a number. What that means, then, is that you could, rather than explicitly coding for 4, 7, and 10, use ‘3n + 1’, and that would always apply clearing after 3 elements.

By: Ben Everard

Ben Everard — Tue, 25 Aug 2009 10:52:51 +0000

I agree with Matt, haven’t heard of it before, and have a cracking project that it would be really useful for.

As you specified Anna, it is only supported by a few browsers, and not the monster that is IE. I guess it’s deciding what’s the lesser of two evils, using more divs than necessary, or using hacking your CSS to please Mr IE.

Great post :-)

By: Jamie Knight

Jamie Knight — Tue, 25 Aug 2009 10:50:09 +0000

Hiya Anna,

Nice little trick there, I have seen something similar done with JS before to catch the browsers that have not quite kept up with the game.

^licks^

Jamie & Lion

By: Matt Oakes

Matt Oakes — Mon, 24 Aug 2009 23:01:37 +0000

I’ve not thought about using that before. It’s a shame we can use CSS selectors more because of compatibility.