web-dev-qa-db-fra.com

Imbrication de classes CSS

Puis-je faire quelque chose comme ce qui suit?

.class1{some stuff}

.class2{class1;some more stuff}
csscss3css-selectors
39
kralco626

Pas possible avec Vanilla CSS. Cependant, vous pouvez utiliser quelque chose comme:

Sass rend CSS amusant à nouveau. Sass est un extension de CSS3, en ajoutant imbriqué règles, variables, mixins, sélecteur héritage, et plus. Il est traduit bien formaté, CSS standard en utilisant l'outil de ligne de commande ou un plugin web-framework.

Ou

Plutôt que de construire un sélecteur long noms pour spécifier l'héritage, en moins vous pouvez simplement imbriquer des sélecteurs à l'intérieur autres sélecteurs. Cela fait héritage clair et feuilles de style plus court.

Exemple:

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}
50
Sarfraz

Pas avec du CSS pur. L'équivalent le plus proche est le suivant:

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}
35
cdhowie

Update: Il existe une spécification CSS3 pour l'imbrication CSS de niveau 3. C'est actuellement un brouillon . https://tabatkins.github.io/specs/css-nesting/

Si elle est approuvée, la syntaxe ressemblerait à ceci:

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Etat: La proposition de spécification n’a pas été approuvée par le groupe de travail.

30
etoxin

Pas directement. Mais vous pouvez utiliser des extensions telles que MOINS pour vous aider à atteindre le même objectif.

4
RabidFire

Non.

Vous pouvez utiliser sélecteurs de groupes et/ou plusieurs classes sur un seul élément, ou vous pouvez utiliser un langage de modèle et le traiter avec un logiciel pour écrire votre code CSS. 

Voir aussi mon article sur Héritage CSS . 

3
Quentin

Essaye ça...

Donnez à l'élément un identifiant, ainsi qu'un nom de classe. Ensuite, vous pouvez imbriquer le # IDName.className dans votre CSS.

Voici une meilleure explication https://css-tricks.com/multiple-class-id-selectors/

1
Oz The Tech Guy

Vous pouvez le faire en utilisant Javascript:

static generateStyle = (parentSelector, allCss) => {
  const reg = /(.+?)\s?\{\s?(.+?)\s?\}+/g;
  const matches = allCss.match(reg);
  const styles = [];

  for (let i = 0; i < matches.length; i++) {
    const cssDecleration = matches[ i ];

    if (cssDecleration.indexOf('@media') === -1) {
      styles.Push(`${ parentSelector } ${ cssDecleration }`);
    }
    else {
      const mediaPos = cssDecleration.indexOf('{');

      if (mediaPos === -1) {
        continue;
      }

      const mediaQuery = cssDecleration.substring(0, mediaPos);
      const rest = cssDecleration.substring(mediaPos);
      const restPlaced = MicroServiceData.generateStyle(parentSelector, rest);

      styles.Push(`${ mediaQuery } ${ restPlaced }`);

    }
  }

  return styles.join('\n');
};
1
yairniz

Je ne crois pas que ce soit possible. Vous pouvez ajouter class1 à tous les éléments qui ont aussi class2. Si ce n'est pas pratique à faire manuellement, vous pouvez le faire automatiquement avec JavaScript (assez facile à faire avec jQuery).

0
Kyle