CSS Selecting a sibling only when another sibling is present

Question

I have the following HTML:

    <nav class="SecondaryNav sideMenu">
        <ul class="Nav_TopUL">
            <li class="Nav_LI">
                <div class="Nav_ItemWrapper">
                    <a class="Nav_A">
                        <img class="Nav_Img" alt="media image">
                        <span class="Nav_Span"></span>
                        <span class="Nav_SubMenuIndicator"></span>
                    </a>
                    <ul class="Nav_SubUL">
                        <li class="Nav_LI">
                            <div class="Nav_ItemWrapper">
                                <a class="Nav_A">
                                    <span class="Nav_Span"></span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="Nav_LI">
                <div class="Nav_ItemWrapper">
                    <a class="Nav_A">
                        <img class="Nav_Img" alt="media image">
                    </a>
                    <ul class="Nav_SubUL">
                        <li class="Nav_LI">
                            <div class="Nav_ItemWrapper">
                                <a class="Nav_A">
                                    <span class="Nav_Span"></span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

What I am trying to select is the UL with the class "Nav_SubUL" but only where it is a sibling of an 'a' with a class "Nav_A" that has an image and a span with a class ".Nav_Span"

Thats a mouthful I hope it makes sense!

Here is what I have tried so far but have not had much luck. CSS is not my strong point so it might be that this has a really obvious answer but I cannot for the life of me get there.

.SecondaryNav.sideMenu .Nav_A > .Nav_Img + .Nav_Span + .Nav_SubMenuIndicator ~ .Nav_SubUL {
    margin-top: 265px;
}

.SecondaryNav.sideMenu .Nav_A > .Nav_Img + .Nav_Span ~ .Nav_SubUL {
    margin-top: 265px;
}

Thanks in advance everyone

I only see one instance of `Nav_SubUL` here. Do you have others in your code that you just did not include? — TylerH, Aug 21 '20 at 11:41
At any rate, what you're trying to do is complex, you would need a "previous sibling" selector *and* a "parent" selector, neither of which exist unfortunately. You will need to redesign your markup or how you apply classes, or you will need to use JavaScript to detect when to apply certain classes w/ the styles you want them to have. — TylerH, Aug 21 '20 at 11:44
yes, sorry, I omitted the whole nav structure so I did not fill the screen with html. the Nav_Li is repeated for x amount of times that there are navigation links, the A will only sometimes have an image and it is on those occasions where is does that I need to adjust the margin of the Nav_SubUL. I hope this helps and makes sense. :) — jcnewman83, Aug 21 '20 at 11:46
The simplest solution would to put a custom class like `Nav_Img` on the elements with `Nav_LI` that you know will have an image. Then you can do `.Nav_Li.Nav_Img .Nav_SubUL {}` or something, otherwise you'll need JS as I mentioned (or a full redesign of the HTML). — TylerH, Aug 21 '20 at 11:48
If you're willing to accept that JS is the answer, I can provide duplicate targets to link the question to that will solve your problem. — TylerH, Aug 21 '20 at 11:54
https://stackoverflow.com/q/1817792/2756409 ; https://stackoverflow.com/q/1014861/2756409 ; https://stackoverflow.com/q/574904/2756409 ; https://stackoverflow.com/q/49393309/2756409 ; https://stackoverflow.com/q/17799236/2756409 are all the relevant targets. — TylerH, Aug 21 '20 at 12:03

score 0 · Accepted Answer · answered Aug 21 '20 at 14:49

I worked it out in the end by applying some additional classes on the parent nav element. Thank you all for your help and suggestions as always. Sometimes all you need is a helpful community to give you the nudge you need to get you to your result. Thanks again. Happy coding!

score -1 · Answer 2 · answered Aug 21 '20 at 11:53

-1

I think you can go with something as

a.Nav_a ~ ul.Nav_SubUL {
    color: pink;
}

answered Aug 21 '20 at 11:53

dantefff

37
3

This does not satisfy the requirement of the `a` element needing to contain an image followed by a span with a certain class name. – TylerH Aug 21 '20 at 11:54
True! I misunderstood the question – dantefff Aug 21 '20 at 11:55

score -1 · Answer 3 · answered Aug 21 '20 at 11:57

-1

You can go with

a.Nav_a ~ ul.Nav_SubUL {
    
}

as dantefff mentioned, but you cannot check for children of a.Nav_a with css only - you'd have to use javascript. Or do something different with your divs and their classes.

answered Aug 21 '20 at 11:57

Ivana Bakija

334
2
10

CSS Selecting a sibling only when another sibling is present

3 Answers3