Question Nidification de classes CSS


Puis-je faire quelque chose comme ceci?

.class1{some stuff}

.class2{class1;some more stuff}

34
2017-12-30 17:47


origine


Réponses:


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

Sass rend le CSS amusant à nouveau. Sass est un   extension de CSS3, ajout de nested   règles, variables, mixins, sélecteur   héritage, et plus. C'est traduit   CSS bien formaté, standard utilisant   l'outil en 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 les 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;
  }
}

43
2017-12-30 17:49



Pas avec CSS pur. L'équivalent le plus proche est celui-ci:

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}

33
2017-12-30 17:49



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

Si approuvé, la syntaxe devrait ressembler à 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;
  }
}

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


27
2018-06-29 13:27



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


4
2017-12-30 17:49



Non.

Vous pouvez utiliser regroupement des sélecteurs 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 CSS.

Voir aussi mon article sur Héritage CSS.


3
2017-12-30 17:49



Je ne crois pas que cela soit possible. Vous pourriez 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
2017-12-30 17:51



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/ 


0
2017-08-23 08:06



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');
};

0
2018-06-28 08:08