How do I select an element only when inside another element?

Question

I have a question regarding CSS selectors. How do I select a

with a specific class name only when its inside a

with a class

相关标签:

Answer 1

you can easily select a div with a specific class name only when its inside a UL with a class name saft like mentioned below css :-

ul.saft .textSlide {
color:red;
}

or see the demo :- http://tinkerbin.com/mcrh7iMq

Answer 2

Simply use the CSS descendant selector (a space) between the parent element and the descendant element:

ul.saft div.textSlide {
    /* CSS rules */
}

JS Fiddle demo.

In this case the rules applied to the div of class textSlide will only apply if its ancestor is a ul of the class saft. You could, instead, use the immediate child combinator, the > but then you'd have to specify the div in relation to each parent/ancestor up to the one whose class is required, which gives potentially difficult to maintain CSS (not in this case, but it can, over time, become problematic).

Answer 3

Just do:

ul.saft .textSlide {

This achieves what you need