Appliquer le style CSS aux éléments enfants

232

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

Remarque: je préfère utiliser un sélecteur css pour les éléments enfants.

Pourquoi le # 1 fonctionne et le # 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: 

<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?

css css-selectors romain m
la source
N'oubliez pas que les sélecteurs>, + et [] ne sont pas disponibles pour IE6 et les versions antérieures.
Erick

Réponses:

309

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

Ce n'est pas la même chose que "tous td, thet les captionéléments qui sont contenus par un divélément avec une classe de test". Pour ce faire, vous devez modifier vos sélecteurs:

' >' n'est pas entièrement pris en charge par certains navigateurs plus anciens (je vous regarde, Internet Explorer). 

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}
Ken Browning
la source
est-il possible d'écrire 3 fois div.test?
m
2
@rm Nope. Il n'y a pas d'imbrication de règles ou de regroupement de type «avec»
sblundy
2
@romanm Il y a moyen d'écrire 3 fois 'div.test'! cherchez à utiliser des frameworks sass ou moins pour écrire des fichiers css! :)
gillyb
@romanm - voir ma réponse, en utilisant un * pour cibler tous les enfants pour éviter la répétition, ou en utilisant .class> * pour tous les enfants directs. C'est pas difficile.
Richard Edwards
L'astuce de ne pas être pris en charge dans IE était très utile, j'essayais de faire fonctionner CSS pour DTCoreText sur iOS mais cela ne fonctionnait pas, leur analyseur est pire qu'IE.
Sirens
123 
.test * {padding: 40px 100px 40px 50px;}
Richard Edwards
la source
11
Notez que * signifie ici que vous ne pouvez pas le remplacer par une autre règle plus spécifique car ce .test *serait la règle la plus spécifique pour chaque élément enfant. En d'autres termes, gardez à l'esprit que tout ce que vous mettez à l'intérieur .test *ne peut pas être remplacé par une règle css plus spécifique car test *c'est la règle la plus spécifique.
vadasambar
81

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 {}

Éditer:

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 > thdit 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>

Greg
la source
fwiw, car le td et la légende dans ce sélecteur sont "muets" - ils correspondront à n'importe quelle th / légende donnée sans égard pour div.test. Ce type de ciblage aveugle est rarement ce que vous voulez en CSS pour autre chose que les styles les plus généraux.
annakata
@annakata: cela fait partie du framework CSS, j'essaie de l'appliquer localement
Roman
10

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

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 obligatoire

user1369111
la source
7

Voici du code que j'ai récemment écrit. 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;
}
<!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>
Développer l'extrait

marque
la source
CSS n'autorise pas les commentaires sur une seule ligne tels que //. Voir stackoverflow.com/questions/4656546/…
Volker E.
4 
div.test td, div.test caption, div.test th

travaille pour moi.

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

Traingamer
la source
2

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 yourclassqui pourraient ne pas être divs) n'affectera que les tables à l'intérieur yourclass. Et, comme le dit Ken, le> n'est pas pris en charge partout (et div[class=yourclass]aussi, utilisez donc la notation ponctuelle pour les classes).

tunnuz
la source
0

Ce code peut aussi faire l'affaire, en utilisant la syntaxe SCSS

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}
greguintow
la source