Selecting the last general sibling - html

Question

I have a bunch of divs with class B following a div with class A:
<div class="B"></div>
<div class="A"></div>
<div class="A"></div>
<div class="A"></div>
<div class="B"></div>
<div class="A"></div>
I'm trying to apply a CSS rule to the last A after each B. I tried
.B ~ .A:last-of-type
but that didn't work. Is this possible?

Answer 1

You can't currently do this with css. The :last-of-type pseudo class works with element types such as span div etc - not with classes
Being that:
1) There is no currently no previous sibling selector
2) You can't change the structure of your markup and
3) You don't know in advance how many .A divs you have after each .B div ...
... you're out luck, CSS currently can't do this.

Answer 2

You can use :last-of-type selector in this case.
.A:last-of-type {
/*apply styling */
}
In your case I recommend you to group them in divs. http://jsfiddle.net/GtLWJ/
This works.
<div class="sec1">
<div class="head">Set</div>
<div class="sub">Item 1</div>
<div class="sub">Item 2</div>
<div class="sub">Item 3</div>
</div>
<div class="sec1">
<div class="head">Set</div>
<div class="sub">Item 1</div>
</div>
CSS:
.head {
font-weight: 800;
}
.sec1 .sub:last-of-type {
border-bottom: 1px solid #000;
}