una - seleccionar clase en css

Clases CSS de anidamiento

Question

¿Puedo hacer algo como lo siguiente?

.class1{some stuff}

.class2{class1;some more stuff}

Answer 1

No con CSS puro El equivalente más cercano es este:

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}

Answer 2

No creo que esto sea posible. Puede agregar class1 a todos los elementos que también tienen class2 . Si no es práctico hacerlo manualmente, puede hacerlo automáticamente con JavaScript (bastante fácil de hacer con jQuery).

Answer 3

No directamente. Pero puede usar extensiones como Less para ayudarlo a lograr lo mismo.

Answer 4

No es posible con CSS de vanilla. Sin embargo, puedes usar algo como:

• Sass

Sass hace CSS divertido de nuevo. Sass es una extensión de CSS3, que agrega reglas anidadas, variables, mixins, herencia de selector y más. Se traduce a CSS estándar bien formateado utilizando la herramienta de línea de comandos o un complemento de web-framework.

O

• Less

En lugar de construir nombres de selector largos para especificar la herencia, en Less puede simplemente anidar selectores dentro de otros selectores. Esto hace que la herencia sea clara y las hojas de estilo más cortas.

Ejemplo:

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

Answer 5

No.

Puede usar selectores de agrupación y / o múltiples clases en un solo elemento, o puede usar un lenguaje de plantilla y procesarlo con software para escribir su CSS.

Ver también mi artículo sobre herencia de CSS .

Answer 6

Prueba esto...

Proporcione al elemento una ID y también un Nombre de clase. Luego puede anidar el # IDName.className en su CSS.

Aquí hay una mejor explicación https://css-tricks.com/multiple-class-id-selectors/

Answer 7

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

Answer 8

Actualización: hay una especificación CSS3 para el anidamiento de nivel 3 de CSS. Actualmente es un borrador. https://tabatkins.github.io/specs/css-nesting/

Si se aprueba, la sintaxis se vería así:

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

Estado: la propuesta de especificación no fue aprobada por el Grupo de Trabajo.