css选择器：找到一个类型的最后一个兄弟

Question

I have a document that looks like this :

<h1>Title A</h1>
<h2>Sub 1</h2>
<h1 class='foo'>Title B</h1>
<h2>Sub 2</h2>
<h2>Sub 3</h2>
<h1>C</h1>
<h2>Sub 4</h2>

And I'd like to select Sub 2 and 3, because they are after Title B, a h1 with class foo. However, Sub 4 doen't interest me be cause the previous h1 is of class foo.

I know I could put div around each block beginning with h1, but my content is generated via markdown, so the only way is to change the DOM once the page is loaded, and it feels dirty and cumbersome.

My question is kinda related to this one How to select all elements after specific element in CSS but I lack the "back to normal" behavior once a regular h1 is seen.

Answer 1

http://jsfiddle.net/70zxd3h8/

.foo + h2, .foo + h2 + h2 {
    background:red;
}

Or h2:nth-of-type(2), h2:nth-of-type(3)

Answer 2

You can use the general sibling selector ~ to select the <h2> tags after the <h1> with the class .foo and use it again to "reset" the CSS properties after the next <h1> tag :

 .foo ~ h2 { color: red; } .foo ~ h1 ~ h2 { color: black; } 

 <h1>Title A</h1> <h2>Sub 1</h2> <h1 class='foo'>Title B</h1> <h2>Sub 2</h2> <h2>Sub 3</h2> <h2>Sub 4</h2> <h2>Sub 5</h2> <h1>C</h1> <h2>Sub 6</h2> <h2>Sub 7</h2> 

This example will change the color of all the h2 tags after the .foo element ( this means you can have as many as you want ) and reset it to black after the next h1 tag.