web-dev-qa-db-fra.com

Comment appliquer un style à tous les enfants d'un élément

J'ai un élément avec class='myTestClass'. Comment appliquer un style CSS à tous les enfants de ces éléments? Je veux seulement appliquer le style aux éléments elements. Pas ses petits enfants.

Je pourrais utiliser

.myTestClass > div {
  margin: 0 20px;
}

qui fonctionnent pour tous les enfants div, mais je voudrais une solution qui fonctionne pour tous les enfants. Je pensais pouvoir utiliser *, mais

.myTestClass > * {
  margin: 0 20px;
}

ne marche pas. 

Modifier

Le sélecteur .myTestClass > * n'applique pas la règle dans firefox 26 et il n'y a pas d'autre règle pour la marge selon firebug. Et cela fonctionne si je remplace * par div. 

csscss-selectors
53
MTilsted

Comme l'a commenté David Thomas , les descendants de ces éléments enfants hériteront (probablement) de la plupart des styles attribués à ces éléments enfants.

Vous devez envelopper votre .myTestClass dans un élément et appliquer les styles aux descendants en ajoutant .wrapper *sélecteur de descendant . Ajoutez ensuite .myTestClass > *sélecteur d'enfants pour appliquer le style aux éléments enfants, pas à ses petits-enfants. Par exemple, comme ceci:

JSFiddle - DÉMO

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}
<div class="wrapper">
    <div class="myTestClass">Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>

89
Anonymous

Au lieu du sélecteur *, vous pouvez utiliser la :not(selector) avec le sélecteur > et définir quelque chose qui ne sera certainement pas un enfant.

Exemple:

.container > :not(Marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>
0
JPB