how to use nth-of-type for classes — not elements [duplicate]

Answer 1

This is not possible to do with CSS Selectors Level 3 (at least, without CSS hacks, extra markup, or JavaScript).

The draft CSS Selectors Level 4 proposes the :nth-match() pseudo-class, which would do what you want:

:nth-match(2n+0 of .type-2) {margin-right:0;}
:nth-match(3n+0 of .type-3) {margin-right:0;}
:nth-match(4n+0 of .type-4) {margin-right:0;}

This is not yet implemented by any browser that I know of, but there is a bug filed to implement it in Chrome.

Answer 2

With only CSS hacks, without modifying your markup, you can do something like the below:

[class*=' type-'], [type^='type-']{ /* Set all the divs to float: left initially */
    float: left;
    content: url('http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg');
    height: 100px; width: 100px;
}

.type-2 + .type-2 + div{
    clear: both; /* Clear float for a div which follows two div with class type-2 */
}

.type-3 + .type-3 + .type-3 + div {
    clear: both; /* Clear float for a div which follows three div with class type-3 */
}

.type-4 + .type-4 + .type-4 + .type-4 + div {
    clear: both; /* /* Clear float for a div which follows four div with class type-4 */
}

Demo Fiddle

Answer 3

Short answer

There is no way to do what you're asking in pure css.

Why

:nth-of-type Can only be used against an element selector like so:

div:nth-of-type(2n+0) { margin-right: 0; }

Reference link.

Possible JS solution

You can try your luck with some jQuery though:

var $this;

$('[class^="type-"]').each(function (){

  $this = $(this);

  if ( $this.attr('class') !== $this.next().attr('class') )
    $this.addClass('last');

});

Then use .type-2.last to access your "last row of type".

Demo

Heres a demo.

Answer 4

nth-child and nth-of-type are pseudo classes and can only be applied to elements.

.layout:nth-of-type is a pseudo-class of a class and so will not work.

Jquery's EQ might offer a solution

http://api.jquery.com/eq/