Target with CSS all h2 EXCEPT first one on a page

[charlie]

Is it possible to Target with CSS all h2 on a wordpress site EXCEPT first one on a page?

I would like to add some kind of styling to the h2 title tags on a wordpress page to visually separate the posts, but adding margin or padding to the first one on the page moves the top of page out of alignment.

Any ideas?

Thank you,
Charlie

[jamygolden]

You can if they’re siblings:

h2 ~ h2{border-bottom: 3px solid red;}

I don’t think you will be able to do this (If they’re not siblings) as CSS cascades.

[shavenraver]

You could try :nth-of-type(N)

Read about it here

H2:nth-of-type(2) {…your styling…}

[charlie]

That could work. I’ll have to limit the total number of posts to display. But that shouldn’t be a problem.

Thank you!

[charlie]

What is the proper way to designate the h2’s you want to style…

:nth-of-type(2-10) would be the 2nd through 10th h2?
or (2-*) would be the 2nd through all present h2’s?

or something else?

[noahgelman]

Use:
:nth-of-type(n+2)

n=0, then it targets the second.
n=1, then it targets the third.
n=2, then it targets the forth.
etc.

I think you guys were over thinking this.

[charlie]

You don’t need to designate a range?

[noahgelman]

@charlie, why would you need to designate range? :nth-of-type isn’t even built for ranges, you can only plug in basic equations. Also, your :nth-of-type(2-10) wouldn’t be “The second through tenth” it would be “Two minus ten”.

Just do this:

h2 { color: #fff; }



h2:nth-of-type(n+2) { color: #333; }

Or whatever those styles should be. The first style would target all H2’s and the second will target all H2’s other than the first.

[charlie]

Ahhhh.

Thank you.

[noahgelman]

Yes, :nth-child() takes “n”, sets it to 0, solves the equation, and then applies the style to the element of that number in order. And then it sets “n” to 1, solves the equation… etc etc. and it does that over and over again so it applies to all

[Author]

Posts