Sélecteurs CSS Sélection d'un élément uniquement à l'intérieur d'un autre élément

J'ai une question concernant les sélecteurs CSS. Comment puis-je sélectionner un <div> avec un nom de classe spécifique, uniquement lorsque le son à l'intérieur d'un <ul> avec un nom de classe saft? Cette classe CSS est utilisé ailleurs et je ne veux pas changer de style partout.

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

source d'informationauteur RonanC

  1. 32

    Simplement utiliser le CSS sélecteur de descendant (un espace) entre le parent de l'élément et l'élément descendant:

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

    JS Fiddle démo.

    Dans ce cas, les règles appliquées pour la div de classe textSlide ne s'applique que si son ancêtre est un ul de la classe saft. Vous pouvez, au lieu de cela, l'utilisation immédiate de l'enfant combinator, le > mais alors vous devez spécifier le div par rapport à chacun des parents/ancêtre jusqu'à celui dont la classe est nécessaire, ce qui donne potentiellement difficile à maintenir CSS (pas dans ce cas, mais il peut, au fil du temps, devenir problématique).

  2. 2

    Viens de faire:

    ul.saft .textSlide {

    Cela permet d'obtenir ce dont vous avez besoin

  3. 0

    vous pouvez facilement sélectionner un div avec un nom de classe spécifique, uniquement lorsque le son à l'intérieur d'une UL avec un nom de classe saft comme mentionné ci-dessous css :- 

    ul.saft .textSlide {
color:red;
}

    ou voir la démo :- http://tinkerbin.com/mcrh7iMq