General sibling selector doesn't work with nested div?

Question

I have one container div with some A elements which change the background image of the div within the same container. I now wish to place both the A elements and the div elements in separate container divs, so I can use flex box to make the thing responsive. When I put them in a container, the background image won't change on hover. Maybe I should use a different selector instead of the General sibling selector? Clueless!

URL: https://melvinosengawebdesign.nl/bedrukken/

HTML

<div class="flex-container">
    <div class="container">
        <a class="size-btn a5" href="#a5" tabindex="1">
        <div class="size-txt">
            <p class="size">A5</p>
            <p class="size-cm">14,8x21cm</p>
            <p class="size-a4">1/2e van A4</p>
        </div></a> <a class="size-btn a6" href="#a6" tabindex="1">
        <div class="size-txt">
            <p class="size">A6</p>
            <p class="size-cm">10,5 x 14,8cm</p>
            <p class="size-a4">1/4e van A4</p>
        </div></a> <a class="size-btn a7" href="#a7" tabindex="1">
        <div class="size-txt">
            <p class="size">A7</p>
            <p class="size-cm">7,4 x 10,5cm</p>
            <p class="size-a4">1/8e van A4</p>
        </div></a>
    </div>
    <div class="container">
        <div class="f-a4">
            Dit is A4, het standaard papier formaat in Nederland
        </div>
        <div class="f-a5"></div>
        <div class="f-a6"></div>
        <div class="f-a7"></div>
    </div>
</div>

CSS

.a5:hover ~ .f-a5, .a5:focus ~ .f-a5 {
    background-image: url(https://mooze.nl/staticfiles/img/flyer-poster-preview.jpg);
}

.a6:hover ~ .f-a6, .a6:focus ~ .f-a6 {
    background-image: url(https://mooze.nl/staticfiles/img/flyer-poster-preview.jpg);
}

.a7:hover ~ .f-a7, .a7:focus ~ .f-a7  {
    background-image: url(https://mooze.nl/staticfiles/img/flyer-poster-preview.jpg);
}

There is no selector that exists that will accomplish what you intend to achieve. Consider leveraging javascript to yield the expected behaviour. — UncaughtTypeError, Jan 09 '18 at 12:17
CSS can only select “downwards” and “to the right” in the DOM tree - but for this to work, you would have first of all to “go up” from the hovered A element to its parent container, because the element you want to select elements in is a sibling _of that_, not your A element itself. — CBroe, Jan 09 '18 at 12:21
If you have full control over your HTML, you can always use the hidden checkbox hack. — Mr Lister, Jan 09 '18 at 12:41
I've made some design changes so I don't have to deal with it, but jQuery did the job for me. — Melvin, Jan 09 '18 at 15:16

score 0 · Answer 1 · answered Jan 09 '18 at 13:21

CSS selectors can only target children or siblings. Not "cousins"

There are workarounds though. You could use a similar structure, placing everything in a flex container (<a> tags before the <div>s, of course), but widhout the intermediate containers (the ones separating the links from the divs), then use media queries to adjust the flex-container width, forcing the divs to come down together as soon as 1 of them would be wrapped.

To be honest, a javascript approach would probably be better.

General sibling selector doesn't work with nested div?

1 Answers1