Селекторы CSS Выбор элемента только в том случае, если внутри другого элемента

У меня вопрос о селекторах CSS. Как выбрать <div> с определенным именем класса, только когда его внутри a <ul> с именем класса saft? Этот класс CSS используется в другом месте, и я не хочу менять стиль во всем мире.

<div id="floater">
    <ul class="saft">
        <li><div class="textSlide"></li>
    </ul>
</div>

Ответ 1

Просто используйте селектор потомков CSS (пробел) между родительским элементом и элементом-потомком:

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

JS Fiddle demo.

В этом случае правила, применяемые к div класса textSlide, будут применяться, только если его предком является ul класса saft. Вместо этого вы можете использовать непосредственный дочерний комбинатор >, но тогда вам нужно будет указать div в отношении каждого родителя/предка до того, чей класс требуется, что дает потенциально трудно поддерживать CSS (не в этом случае, но со временем может стать проблематичным).

Ответ 2

Просто выполните:

ul.saft .textSlide {

Это обеспечивает то, что вам нужно

Ответ 3

вы можете легко выбрать div с определенным именем класса только тогда, когда его внутри UL с именем класса saft, как указано ниже, css: -

ul.saft .textSlide {
color:red;
}

или см. демонстрацию: - http://tinkerbin.com/mcrh7iMq