How do I select an element only when inside another element?
I have a question regarding CSS selectors. How do I select a <div>
with a specific class name only when its inside a <ul>
with a class name saft
? This CSS class is used elsewhere and I don't want to change the styling everywhere.
<div id="floater">
<ul class="saft">
<li><div class="textSlide"></li>
</ul>
</div>
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).
Just do:
ul.saft .textSlide {
This achieves what you need