0

I have a simple menu styled with css.

<ul>
    <li> <a href="#">1</a> </li>
    <li> <a href="#" class="active">2</a> </li>
    <li> <a href="#">3</a> </li>
    <li> <a href="#">4</a> </li>
</ul>

Is it possible to apply specific style to li element, containing a with active class.

I've tryed something like this:

#container > ul > li a.active < li {
    custom: style;
}
halofourteen
  • 832
  • 2
  • 10
  • 17

4 Answers4

1

Not possible with CSS. Though this can be achieved with scripting.

Similar question here.

Apply CSS styles to an element depending on its child elements

Community
  • 1
  • 1
Vishwanath
  • 6,027
  • 4
  • 34
  • 56
1

No, selectors can't match in reverse. In such circumstances the best approach is to simplify the matter.

A elements can be styled as block level elements, so simply push down whatever styles you had on the parent LI to the A elements. You already have your specific selector a.active, that should be distinct enough that you can style them appropriately.

Filip Dupanović
  • 28,429
  • 11
  • 76
  • 105
0
#container ul li a.active{ yourstyle:styleproperties;}

or I think you may want to do like this

#container ul li a:active{ yourstyle:styleproperties;}

if you want dynamically add class to element you can use javascript and jquery

http://api.jquery.com/addClass/

$("#container ul li a").addClass("active");

and for parent(this class will be added for li element which is parent to a.active element)

$('#container ul li a.active').parent().addClass("active");

there is already similar topic Target outer div based on class of inner a

Community
  • 1
  • 1
Robert
  • 17,808
  • 4
  • 50
  • 79
  • Sorry but he wants the container that has the `a.active` to have the style. So the style should apply on the `li` element that has the child `a.active` – Henrik Andersson May 07 '13 at 06:28
0

Try this:

ul li a.active{ color:green;}

http://jsfiddle.net/Vloxxity/VZgQx/

Edit: i've read your comment, this is only possible if you mark the li with a active class.

Vloxxity
  • 920
  • 1
  • 9
  • 28