web-dev-qa-db-fra.com

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 sélectionner un <div> avec un nom de classe spécifique uniquement lorsque son <ul> avec un nom de classe saft? Cette classe CSS est utilisée ailleurs et je ne veux pas changer le style partout.

<div id="floater">
    <ul class="saft">
        <li><div class="textSlide"></li>
    </ul>
</div>
csscss-selectors
23
RonanC

Utilisez simplement le sélecteur de descendant CSS (un espace) entre l’élément parent et l’élément descendant:

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

Démo de JS Fiddle .

Dans ce cas, les règles appliquées à la div de la classe textSlide ne s'appliqueront que si son ancêtre est une ul de la classe saft. Vous pouvez, à la place, utiliser le combinateur immédiat d’enfant, le >, mais vous devrez alors spécifier la div par rapport à chaque parent/ancêtre jusqu’à celui dont la classe est requise, ce qui rend potentiellement difficile le maintien de CSS (pas dans cette section). cas, mais avec le temps, cela peut devenir problématique).

40
David Thomas

Il suffit de faire:

ul.saft .textSlide {

Cela réalise ce dont vous avez besoin

4
Andy

vous pouvez facilement sélectionner une div avec un nom de classe spécifique uniquement si elle se trouve à l'intérieur d'une UL avec un nom de classe tel que mentionné ci-dessous css: - 

ul.saft .textSlide {
color:red;
}

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

0
Shailender Arora