web-dev-qa-db-fra.com

Appliquer le style CSS aux éléments enfants

Je veux 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 mal?

csscss-selectors
208
roman m

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

Ce n'est pas la même chose que "tous les éléments td, th et caption qui sont contenus par un élément div avec une classe de test". 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;
}
288
Ken Browning
.test * {padding: 40px 100px 40px 50px;}
107
Richard Edwards

Le >sélecteur correspond aux enfants directs uniquement, pas aux descendants.

Tu veux

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>

75
Greg

Si vous souhaitez ajouter un style à tous les enfants et aucune spécification pour la balise html, utilisez-le.

Balise parent div.parent

balise enfant à l'intérieur du div.parent comme <a>, <input>, <label> etc.

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

Vous pouvez également supprimer important, ce n'est pas nécessaire

10
user1369111

Voici du code que j'ai récemment écrit. Je pense que cela fournit une explication de base de la combinaison de 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>
5
Mark
div.test td, div.test caption, div.test th

travaille pour moi.

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

4
Traingamer

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 divs) n'affecteront que les tableaux de yourclass. Et, comme le dit Ken, le> n'est pas supporté partout (et div[class=yourclass] aussi, utilisez donc la notation par points pour les classes).

2
tunnuz