I've been looking around and I haven't quite seen how to do this, so here we go:

I've got some <div>'s with class of "figure", which I would like to float:top on every page except for the :first. My problem is that I can't seem to find a way to style classes with reference to the page they're on.

I was hoping it would be something like this:

.figure {
  float: top;
}

@page :first .figure {
  float: none;
}

or maybe:

.figure {
  float: top;
}

@page :first {
  .figure {
    float: none;
  }
}

...but I don't think these are even valid.

Is something like this possible at all? Am I anywhere near the solution?

Thanks,
Andrew

At the moment there is no mechanism in CSS to style content differently depending on the page on which it appears. If you have some control over the content you could add an extra class to the first one or two figures saying not to float them, then float the rest, would that work?

Hmm... I was afraid of that. I can can change the structure, but I was hoping not to.

Another thing I tried was this:

.figure:first-of-type {
  float: none;
}

...but that didn't work. Does :first-of-type only apply to the first of a particular element and not the first to fulfill a particular rule (like having class="figure")?

Thanks,
Andrew

Yes, "type" in this case really just means the element name, so it will apply to any element that is the first with that name within the parent element and also has a class of figure.