CODEWITHSUNDEEP
css
halofourteen
halofourteen

Reputation: 1000

Is it possible to select only li element containing a element with class with CSS

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;
}

Upvotes: 0

Views: 1415

Answers (4)

Vloxxity
Vloxxity

Reputation: 980

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.

Upvotes: 0

Filip Dupanović
Filip Dupanović

Reputation: 33650

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.

Upvotes: 1

Robert
Robert

Reputation: 20286

#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

Upvotes: 0

Vishwanath
Vishwanath

Reputation: 6004

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

Upvotes: 1

Related Questions