Using CSS to detect if child exists

Question

I have the following menu and when I use the below CSS I have a small arrow appear under it, but I'd only like the arrow to appear if the li has a .subnav present

CSS

.nav li: hover {
    background: url(.. / img / template / nav - hover.png) no - repeat bottom center;
}

HTML

<div class="nav">
    <ul>
        <li><a href="#">Services</a>

            <div class="subnav">
                <ul>
                    <li><a href="#">menu item</a>
                    </li>
                    <li><a href="#">menu item</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/companies">Companies</a>

            <div class="subnav">
                <ul class="companylist1">
                    <li><a href="#">1</a>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/locations">Locations</a>
        </li>
        <li><a href="/news">News</a>
        </li>
        <li><a href="/contact">Contact</a>
        </li>
    </ul>
</div>

@M1K1O: But selectors are entirely based on conditions/predicates. That has nothing to do with CSS not being a programming language. And please don't use ` for formatting emphasis. — BoltClock, Aug 28 '13 at 08:24
if you want to use just css then apply the background to the div instead of li. `.nav li > div.subnav:hover` — Mr_Green, Aug 28 '13 at 08:25
http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Leo T Abraham, Aug 28 '13 at 08:27

coma · Answer 1 · 2013-08-28T08:51:42.157

If div.subnav will have absolute position, just put it before the anchor:

<li>
    <div class="subnav">
        <ul class="companylist1">
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
        </ul>
    </div>
    <a href="/companies">Companies</a>
</li>

and then:

div.subnav + a {...}

or:

div.subnav + a:hover {...}

http://jsfiddle.net/coma/2ZBnY/

score 1 · Accepted Answer · answered Aug 28 '13 at 08:30

1

The only way you can achieve this as of now is by using nth-of-type

.nav > ul > li:nth-of-type(1) > a, .nav > ul > li:nth-of-type(2) > a {
    color: #f00;
}

Demo

In the above selector, am selecting a which is directly nested under 1st and 2nd li which are further nested to ul which is further nested in .nav

answered Aug 28 '13 at 08:30

Mr. Alien

140,764
31
277
265

Have used this sort of method but used the following code `.nav > ul > li:nth-of-type(1):hover, .nav > ul > li:nth-of-type(2):hover` – ngplayground Aug 28 '13 at 08:58
@Beardy yea, you can use `:hover` if you want the effect on hover :) – Mr. Alien Aug 28 '13 at 09:12
@Beardy, you said "only like the arrow to appear if the li has a .subnav present" and this won't satisfy that... – coma Aug 28 '13 at 09:12

score 0 · Answer 3 · answered Aug 28 '13 at 08:25

0

The only way to do that with pure css is placing arrow inside to the "subnav" container. But you can do this with jquery easily.

if ($(".nav li .subnav").length > 0)) {
    // .. set background
}

answered Aug 28 '13 at 08:25

kgd

1,476
2
10
15

score 0 · Answer 4 · answered Aug 28 '13 at 08:25

0

To my knowledge this is not possible with CSS alone. You best bet is to add a class to the two <li>s with .subnav children.

answered Aug 28 '13 at 08:25

SimonR

916
5
10

score 0 · Answer 5 · answered Aug 28 '13 at 08:25

Because you can't create ifstatements in CSS, you either need to add this with javascript/jQuery, or get creative...

I would suggest creating the down arrow with a pseudo-element (or actual HTML element) within the .subnav item, then positioning it absolutely outside of the .subnav so that it appears to be within the parent li item.

By doing this, the arrow will only be shown if the subnav is present. You would have to play with how you are showing/hiding the .subnav, however, because settings display:none; would obviously also cause the arrow to not appear.

score 0 · Answer 6 · answered Aug 28 '13 at 08:26

0

You can't create conditions in CSS however, you might be able to work it differently.

How about showing the image on the .subnav class instead? Put it at the top center instead of the bottom center of the li.

The selector would be something like .nav li > .subnav:hover for the image.

answered Aug 28 '13 at 08:26

webnoob

14,765
12
73
149

The `.subnav` is full width of the page, whereas the `.nav` is only a certain width. That is why the `background-image` action is on the `.nav li:hover` at the moment, I just hoped there was a way of detecting if `.subnav` existed inside the `li` – ngplayground Aug 28 '13 at 08:30
@Beardy My [**solutionn**](http://stackoverflow.com/a/18483065/1577396) seems to work. but not sure why someone downvoted it. – Mr_Green Aug 28 '13 at 08:50

Using CSS to detect if child exists

6 Answers6