Clases de jerarquización CSS

Question

¿Puedo hacer algo como lo siguiente?

.class1{some stuff} 

.class2{class1;some more stuff} 

Answer 1

No es posible con CSS vainilla. Sin embargo, usted puede usar algo como:

• Sass

Sass se burla CSS de nuevo. Sass es una extensión de CSS3, que agrega reglas anidadas, variables, mixins, herencia de selector , y más. Se tradujo a CSS estándar con formato correcto utilizando la herramienta de línea de comandos o un complemento de web-framework .

O

• Less

En lugar de construir selector de largo nombres para especificar la herencia, en menos puede simplemente selectores anidar dentro de otros selectores. Esto hace que herencia clara y hojas de estilo más corto.

Ejemplo:

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

Answer 2

No

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

Answer 3

No con CSS puro. El equivalente más cercano es la siguiente:

.class1, .class2 { 
    some stuff 
} 

.class2 { 
    some more stuff 
} 

Answer 4

Nº

Puede utilizar grouping selectors y/o múltiples clases en un solo elemento, o puede utilizar un lenguaje de plantillas y la procesan con un software para escribir su CSS.

Vea también mi artículo en CSS inheritance.

Answer 5

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

Answer 6

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 sería el siguiente:

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

Answer 7

probar este ...

dar al elemento un identificador, y también un nombre de clase. Entonces puedes anidar el #IDName.className en tu CSS.

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