how can select a parent tag?

Question

i have a code like below:

<nav id="mainNav" class="">
   <div id="navContainer">
       <div id="active">
           [ some list ]
       </div><!-- #active -->
   </div><!-- #navContainer -->
</nav><!-- #mainNav -->

i want to change the background color of #mainNav when user hover on #active, but i dont know what to do. i did this and no results:

#active:hover #mainNav{
   background-color: #333;
}

any idea?

if you want to do it without js/jQuery, take a look at my answer — coma, May 10 '13 at 19:33

score 3 · Accepted Answer · answered May 10 '13 at 19:30

Use JS or try a different approach, CSS ONLY:

http://jsfiddle.net/coma/zxybD/5/

HTML

<div id="main">
    <a href="#" class="red">red</a>
    <a href="#" class="green">green</a>
    <a href="#" class="blue">blue</a>
    <div></div>
</div>

CSS

#main {
    position: relative;
}

#main > a {
    display: block;
    padding: .5em;
}

#main > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #eee;
    z-index: -1;
}

#main > a.red:hover ~ div {
    background-color: red;
}

#main > a.green:hover ~ div {
    background-color: green;
}

#main > a.blue:hover ~ div {
    background-color: blue;
}

oh good idea coma :) simple and creative – bobsilon May 10 '13 at 19:46 — bobsilon, May 10 '13 at 19:46

score 1 · Answer 2 · answered May 10 '13 at 19:21

1

As One Trick Pony commented, there is no parent selector in pure CSS (at least yet). If you want to select the parent, you'd have to do so either through a different kind of selector (which requires knowledge of the DOM structure), or through something like Javascript.

In Javascript you can use .parentNode on the element to get its parent. If you have jQuery, you can call .parent().

answered May 10 '13 at 19:21

Igor

30,885
14
70
107

different kind of selector? Please explain more – bobsilon May 10 '13 at 19:23

Geeky Guy · Answer 3 · 2013-05-10T19:30:36.683

1

$("#active").mouseenter(function () {
    $("#mainNav").css("background-color", "#333");
});

Don't forget to change it on mouse leaving as well.

$("#active").mouseleave(function () {
    $("#mainNav").css("background-color", "#ABC" /*some other color*/);
});

edited May 10 '13 at 19:30

answered May 10 '13 at 19:23

Geeky Guy

8,658
4
38
60

Do you see a jQuery tag anywhere? Besides, `.hover()` would be a far better choice. – Niet the Dark Absol May 10 '13 at 19:26
@Kolink check the OP's comments in the question. He accepts CSS answers. – Geeky Guy May 10 '13 at 19:27
Fair enough, but the point about `.hover` still stands ;) – Niet the Dark Absol May 10 '13 at 19:28
I agree. .Hover would be better. Editing. – Geeky Guy May 10 '13 at 19:29
.hover would assign the same function to two different events. I've broken it down into two parts as per the jQuery specs. – Geeky Guy May 10 '13 at 19:31
Um... `.hover` lets you define separate functions, unless I'm much mistaken. – Niet the Dark Absol May 10 '13 at 19:31
Just checked and yeah, it does. My bad. I think the example is (just slightly) more readable, though. – Geeky Guy May 10 '13 at 19:32

Ibu · Answer 4 · 2013-05-10T19:31:29.567

1

Since there is no way to have a CSS parent selector i would suggest you rethink your design.

add the class name active to the parent div when there is the div with id="active" as a child and you style the .active class to your needs:

<nav id="mainNav" class="{if child active print 'active'}">
   <div id="navContainer">
       <div id="active">
           [ some list ]
       </div><!-- #active -->
   </div><!-- #navContainer -->
</nav><!-- #mainNav -->

Depending on the language you are using you can accomplish this.

#mainNav.active:hover #active{
   ... your hover properties ...
}

edited May 10 '13 at 19:31

answered May 10 '13 at 19:24

Ibu

39,552
10
71
99

How exactly would this help? OP wants the style to change when a child is hovered over... – Niet the Dark Absol May 10 '13 at 19:30
See my edit, i added an example – Ibu May 10 '13 at 19:31
Still, that would apply the different colour no matter where in the navbar the mouse is hovering... – Niet the Dark Absol May 10 '13 at 19:32
actually it will only apply to the id active – Ibu May 10 '13 at 19:34

score 1 · Answer 5 · answered May 10 '13 at 19:25

1

CSS4 defines a "subject" operator, which would allow you to do this:

!#mainNav #active:hover { background-color:#333 }

However, as far as I am aware no browsers support this yet. Instead, you can use this JavaScript:

(function() {
    var nav = document.getElementById('mainNav'), active = document.getElementById('active'),
        f = function(e) {
            e = e || window.event;
            nav.style.backgroundColor = e.type.match(/mouseover/) ? "#333" : "";
        };
    if( window.addEventListener) {
        active.addEventListener("mouseover",f,false);
        active.addEventListener("mouseout",f,false);
    }
    else {
        active.attachEvent("onmouseover",f);
        active.attachEvent("onmouseout",f);
    }
})();

answered May 10 '13 at 19:25

Niet the Dark Absol

301,028
70
427
540

I thought the `!` was intended to *follow* the subject (`#mainNav!`, though there's been quite some discussion about preceding, following and/or wrapping in that regard)? And, incidentally, things seem to be changing (so far as CSS is concerned, at least) again: http://www.w3.org/TR/2013/WD-selectors4-20130502/#profiles – David says reinstate Monica May 10 '13 at 19:31
@DavidThomas The example showed it prefixed, and the note seems to mention something about it changing and being undecided XD – Niet the Dark Absol May 10 '13 at 19:33
The link was only to illustrate the fact that the subject selector isn't implemented in the 'fast' profile and "CSS implementations conformant to Selectors Level 4 must use the 'fast' profile for CSS selection." As to the syntax, yeah: honestly, I probably shouldn't have mentioned that, given the state of flux. – David says reinstate Monica May 10 '13 at 19:35

how can select a parent tag?

5 Answers5