Styling a parent element of a child in CSS

Question

I would really appreciate any help you could provide on this matter. I am trying to style the parent of a specific child element.

It seems that this might not be possible in CSS due to technical restraints, but I was wondering if there was a solution available in JavaScript that could achieve this?

I am trying to alter the parent <a> element of a <ul class="children"> child element, only when that <a> element has class="active". e.g. there will be other <a> elements with <ul> child elements which are not active that I don't want to be styled.

If you know of any solution that would be able to achieve this that would be much appreciated! Whilst I am familiar with CSS I am not competent enough in JavaScript to write this myself.

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>
        <ul class="children">
            <a>Something here </a>
        </ul>
    </li>  
    <li>    
        <a>Some Other Page</a>  
        <ul class="children">
            <a>Something here</a>
        </ul>
    </li>  
</ul>

Answer 1

I suggest you style a.active. (Or haven't I understood the question?)

I.e.

a.active {
  background-color: pink;
}

Answer 2

There is no css selector to select parent elements. You should also give the parent element a selector you can use to style it.

Also see Is there a CSS parent selector? for more information on the parent selector subject.

Answer 3

I'm really confused by your question but your could give two class names to the same element. Like for the

<ul class="children">

You could name it to:

<ul class="children active">

Answer 4

May be you want this:

if($('ul.children a').hasClass('active')){
  $('ul.children').sibling('a').addClass('active');
}

see:

I am trying to alter the parent <a> element of a <ul class="children">

while this is not true, <a> is the sibling in your case.

Answer 5

Why can't you do a style for the class active?

.active { 
    background-color: red;
}

As per your HTML you could style the exact parent element.

Answer 6

Your HTML nested tags are Ok. No need of javascript Your css rule should look something like this

a.active+ul.children { ...what ever .... }

(In order to style the UL class children when its sibling is a class active

Answer 7

Sorry, I read it again and again, and now I got it!

.menu>li>a.active{
  font-weight:bold
}

It will select only the first-level "a.active" children from the first-level "li" children from ".menu" ;)

Hope it helps!