Selector for when child of brother is present

Question

I have this piece of HTML.

<div class="page-top">
    <div class="page-title">
        <h2></h2>
        <h1></h1>
    </div>
    <div class="page-controls buttons">
        <a href="" class="button"></a>
   </div>
</div>

With two different styles for the h1. One where I apply a padding-top to the h1 when it's show alone. And the other style, for when the h1 is preceded by an h2, I remove the padding-top with .page-title h2 + h1

My question is how would you select the page-controls.buttons, only when the h1 is preceded by the h2. Is it possible?

Unfortunately, you can't select previous siblings with CSS: http://stackoverflow.com/questions/1817792/css-previous-sibling-selector — Casey Falk, Aug 06 '14 at 21:35
`h1` *should* come before an `h2`. How are you controlling when the `h2` is or is not shown? — hungerstar, Aug 06 '14 at 21:39
It is possible, but will require restructuring your markup. If markup cannot be changed, then JS/jQuery is the way to go. — DRD, Aug 06 '14 at 21:45
@DRD I can change the markup, that's not a problem. How would you do it? — andrantis, Aug 06 '14 at 21:48

score 1 · Accepted Answer · answered Aug 07 '14 at 02:07

1

Here's a solution with restructured markup: http://jsfiddle.net/functionalcss/k8dzg5zm/.

HTML:

<div class="page-top">
    <h2>Smaller Heading</h2>
    <h1>Big Heading</h1>
    <div class="page-controls buttons">
        <a href="" class="button">Click me</a>
    </div>
</div>

CSS:

.page-top > h2 +  h1 + .page-controls.buttons {
    background-color: yellow;
}

answered Aug 07 '14 at 02:07

DRD

5,557
14
14

Thank you. Your solution worked. Although I decided to give position absolute to one of the elements and accomplish what I needed. – andrantis Aug 07 '14 at 03:08

Selector for when child of brother is present

1 Answers1