Appliquer le style CSS aux éléments enfants

StackOverflow https://stackoverflow.com/questions/632100

  •  08-07-2019
  •  | 
  •  

Question

Je souhaite appliquer des styles uniquement à la table à l'intérieur de la DIV avec une classe particulière:

Remarque: je préférerais utiliser un sélecteur CSS pour les éléments enfants.

Pourquoi le n ° 1 fonctionne-t-il et le n ° 2 pas?

1: 

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2: 

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML: 

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

Qu'est-ce que je fais de travers?

Était-ce utile?

La solution

Ce code " div.test th, td, caption {padding:40px 100px 40px 50px;} " applique une règle à tous les th éléments contenus par un div élément avec une classe nommée test, en plus de tous td éléments et de tous caption éléments.

Ce n'est pas la même chose que & "; tous les >, <=> et <=> éléments contenus dans un élément <=> avec une classe de <=> &"; Pour ce faire, vous devez modifier vos sélecteurs:

'<=>' n'est pas entièrement supporté par certains navigateurs plus anciens (je vous regarde, Internet Explorer). 

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

Autres conseils

.test * {padding: 40px 100px 40px 50px;}

Le > sélecteur ne reconnaît que les enfants directs, pas des descendants.

vous voulez 

div.test th, td, caption {}

ou plus probable 

div.test th, div.test td, div.test caption {}

Modifier:

Le premier dit 

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

Alors que le second dit 

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

Dans votre original, le div.test > th indique any <th> which is a **direct** child of <div class="test">, ce qui signifie qu'il correspondra à <div class="test"><th>this</th></div> mais ne correspondra pas à <div class="test"><table><th>this</th></table></div>

Si vous souhaitez ajouter un style à tous les enfants et qu'aucune spécification pour une balise html ne soit spécifiée, utilisez-le.

Balise parent div.parent

balise enfant dans le div.parent telle que <a>, <input>, <label> etc.

code: div.parent * {color: #045123!important;}

Vous pouvez également supprimer des éléments importants, ce n'est pas obligatoire

Voici un code que j'ai récemment écrit. Je pense que cela fournit une explication de base de la combinaison des noms de classe / ID avec des pseudoclasses. 

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}
<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

div.test td, div.test caption, div.test th

travaille pour moi.

Le sélecteur d'enfants > ne fonctionne pas dans IE6.

Pour autant que je sache ceci: 

div[class=yourclass] table {  your style here; }

ou dans votre cas même ceci: 

div.yourclass table { your style here; }

(mais cela fonctionnera pour les éléments avec yourclass qui pourraient ne pas être div s) n’affectera que les tableaux de div[class=yourclass]. Et, comme le dit Ken, le & Gt; n’est pas supporté partout (et <=> aussi, utilisez donc la notation par points pour les classes).

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top