Style the parent of the current element

Question

In this code, I want my ul to have a border line colored with the activate li color. For example, if the .activate element is gray, the ul border bottom must be gray. How can I accomplish this with the markup below?

<nav>
    <ul>
        <li class="gray"><a href="#">All</a></li>
        <li class="blue"><a href="#">Item 1</a></li>
        <li class="activate orange"><a href="#">Item 2</a></li>
        <li class="green"><a href="#">Item 3</a></li>
    </ul>
</nav>

Are you happy to see a jQuery solution? Or did you want to know if it was achievable with CSS only? — robertp, Jun 04 '13 at 19:53
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Jason Yaraghi, Jun 04 '13 at 20:52

score 4 · Accepted Answer · edited May 23 '17 at 12:11

4

There is no CSS parent selector. Just slap a class on the <ul> when you want to style it.

edited May 23 '17 at 12:11

Community

1
1

answered Jun 04 '13 at 19:42

Matt Ball

332,322
92
617
683

score 0 · Answer 2 · answered Jun 04 '13 at 20:08

There is no cross-browser compatible only CSS solution as of today, here is one that is using jQuery:

Fiddle Demo:

http://jsfiddle.net/robertp/M9SGU/

Markup:

<ul id="menu">
    <li class="gray"><a href="#">All</a></li>
    <li class="blue"><a href="#">Item 1</a></li>
    <li class="orange"><a href="#">Item 2</a></li>
    <li class="green"><a href="#">Item 3</a></li>
</ul>

JavaScript:

$('#menu').on('click', 'li', function(event){
    event.preventDefault();

    var $item = $(event.currentTarget);
    $item.siblings().removeClass('active');
    $item.addClass('active');

    $item.parent().css('border', '1px solid ' + $item.css('color'));
});

Styling:

.gray,
.gray a {
    color: gray;
}
.blue,
.blue a {
    color: blue;
}
.orange,
.orange a {
    color: orange;
}
.green,
.green a{
    color: green;
}

score -1 · Answer 3 · answered Jun 04 '13 at 20:05

It's possible with the CSS4 selectors, although they are not standard at all at the moment.

ul!>li.activate.gray {border-bottom-color:gray}
ul!>li.activate.blue {border-bottom-color:blue}
ul!>li.activate.orange {border-bottom-color:orange}
ul!>li.activate.green {border-bottom-color:green}

W3C description:

E! > F an E element parent of an F element

Style the parent of the current element

3 Answers3