Appliquer le style CSS aux éléments enfants

Je veux appliquer des styles uniquement à la table à l’intérieur du DIV avec une classe particulière:

Note: Je préfère utiliser un sélecteur CSS pour les éléments enfants.

Pourquoi le n ° 1 fonctionne-t-il et que le n ° 2 ne fonctionne 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:

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

Qu’est-ce que je fais mal?

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

Ce n’est pas la même chose que “tous les éléments td , th et caption contenus dans un élément div avec une classe de test “. Pour ce faire, vous devez modifier vos sélecteurs:

> ‘ n’est pas totalement 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; } 
 .test * {padding: 40px 100px 40px 50px;} 

Le sélecteur > correspond uniquement aux enfants directs, 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  underneath a 
*/ td, /* or any anywhere at all */ caption /* or any */

Alors que le second dit

  div.test th, /* any  underneath a 
*/ div.test td, /* or any underneath a
*/ div.test caption /* or any underneath a
*/

Dans votre original, le div.test > th dit any

which is a **direct** child of

, ce qui signifie qu’il correspondra à

this

mais ne correspondra pas à

this

Si vous souhaitez append du style à tous les enfants et qu’aucune spécification pour la balise html ne soit utilisée, utilisez-la.

div.parent parent div.parent

balise enfant à l’intérieur du div.parent comme , , etc.

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

Vous pouvez également supprimer important, son pas nécessaire

Voici un code que j’ai écrit récemment. Je pense qu’il 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; } 
    Class practice    

orange

green

red

blue

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

travaille pour moi.

Le sélecteur enfant> ne fonctionne pas dans IE6.

Pour autant que je sache ceci:

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

ou même dans votre cas:

 div.yourclass table { your style here; } 

(mais cela fonctionnera pour les éléments avec votre yourclass qui pourraient ne pas être div s) affectera uniquement les tables dans votre yourclass . Et, comme dit Ken, le> n’est pas supporté partout (et div[class=yourclass] aussi, donc utilisez la notation de point pour les classes).