Selectores de CSS Seleccionar un elemento solo cuando está dentro de otro elemento

Question

Tengo una pregunta con respecto a los selectores de CSS. ¿Cómo selecciono un <div> con un nombre de clase específico solo cuando está dentro de un <ul> con un nombre de clase saft? Esta clase de CSS se usa en otro lugar y no quiero cambiar el estilo en todas partes.

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

Answer 1

basta con utilizar el selector CSS descendiente (un espacio) entre el elemento primario y el elemento descendiente:

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

JS Fiddle demo.

En este caso las reglas aplicadas a la div de clase textSlide sólo se aplicará si su ancestro es un ul de la clase saft. En su lugar, podría usar el combinador secundario inmediato, el >, pero luego debe especificar el div en relación con cada padre/ancestro hasta aquel cuya clase se requiere, lo que le da un CSS potencialmente difícil de mantener (no en este caso, pero puede, con el tiempo, volverse problemático).

Answer 2

Just Do:

ul.saft .textSlide {

Con ello se consigue lo que necesita

Answer 3

puede seleccionar fácilmente un div con un nombre de clase específico sólo cuando su interior de un UL con un nombre de clase Saft como mencionan a continuación css: -

ul.saft .textSlide { 
color:red; 
} 

o ver el demo: - http://tinkerbin.com/mcrh7iMq