Agrupar capas

[Sandra1990]

Hola a todos

Soy algo nueva en esto del css y ando loca buscando respuesta a una pregunta que me surge, ( quizás porque no tenga respuesta )

Imaginemos que tenemos un documento con una serie de capas, c1, c2, c3, etc

Hay algún método para definir / nombrar / crear, en la hoja de estilos, una etiqueta, de forma que dicha etiqueta agrupe a las capas que se quieran y así poder aplicar estilos a esas capas con mucho menos código ?

La cosa quedaría más o menos así, por ejemplo..

Código:

.gC => #c1,#c2,#c3

.gC{ display:none; }

Sé que se podría hacer añadiendo la clase gC a las capas, pero mi intención es poder hacerlo sin tener que modificar el código html, sólo tocando el css

Algo así como crear una clase pero definiéndo a qué capas afecta desde la hoja de estilos..

Saludos!

[Dalvenjha]

Puedes hacerlo aplicando una clase dinámicamente con DOM y Javascript, pero eso te complica más, aunque sea semántico, yo presumo que no quieres complicaciones, sin embargo, si tienes en un mismo lugar como un div o asi lo que quieras esconder, puedes usar su tag y el selector ">" para referirte a ellos como "hijos de su elemento padre".

¿Tan malo te resulta ponerles una clase? xD.

Saludos!!

[Sandra1990]

Hola Dalvenjha, gracias por tu respuesta pero..

No quiero/puedo meter nada de javascript, sólo css

Las etiquetas pueden no tener el mismo padre

Tampoco quiero/puedo tocar el html

La idea es, crear una especie de clave para definir que siempre que le apliquemos estilos a esa clave, se lo estamos aplicando a todas las capas a las cuales hace referencia la clave..

[Dalvenjha]

No se puede ^^

[Dalvenjha]

Uhmmm tpco son elementos únicos probablemente no? por tanto no podrías usar el tag para hacer esto, definitivamente solo puedes usar los ids.

Pd.- No hace falta que toques demasiado tu html para ponerles las clases dinámicamente con DOM y JS. Solo en el header harías algo de movimiento.

Saludos!!

[Sandra1990]

Es extraño que no se pueda, sobre todo porque ahorraría bastante código en proyectos donde se parte de un mismo código html y simplemente se le da distinta apariencia mediante css, al estilo csszengarden

Imaginemos que tenemos el siguiente código html

Código:

<div id="menu">
   <div id="menu_op1"><a href="">enlace</a></div>
   <div id="menu_op2"><a href="">enlace</a></div>
   <div id="menu_op3"><a href="">enlace</a></div>
   <div id="menu_op4"><a href="">enlace</a></div>
   <div id="menu_op5"><a href="">enlace</a></div>
   <div id="menu_op6"><a href="">enlace</a></div>
</div>

y queremos aplicar una serie de estilos a los enlaces: 1,2,5 y 6

con el "método tradicional" nos quedaría, por ejemplo, el siguiente css

Código:

#menu_op1,#menu_op2,#menu_op5,#menu_op6
{ position:relative; width:200px; height:20px; background-color:#ccc }

#menu_op1 a,#menu_op2 a,#menu_op5 a,#menu_op6 a
{ color:#fff; font-weight:bold; text-decoration:none; }

#menu_op1 a:hover,#menu_op2 a:hover,#menu_op5 a:hover,#menu_op6 a:hover
{ color:#333; }

mientras que disponiendo de esta funcionalidad quedaría..

Código:

#grupo => #menu_op1,#menu_op2,#menu_op5,#menu_op6

#grupo
{ position:relative; width:200px; height:20px; background-color:#ccc }

#grupo a
{ color:#fff; font-weight:bold; text-decoration:none; }

#grupo a:hover
{ color:#333; }

Queda mucho más claro el código, se escribe menos código, y no se ha de modificar el html, lo que permite, en el siguiente proyecto que utiliza ese html, por ejemplo definir los estilos, esta vez para los enlaces 1,3 y 5

Alguien ha visto alguna vez algo parecido ?

[Dalvenjha]

Pues hay una razón simple para que eso no se haga: "Existen las clases", y no se necesita nada más para agrupar elementos diversos, se que puede sonar como terco de mi parte decirte eso, pero creo que con el uso de clases e id puede lograrse todo lo que se quiera. Crear "grupos" solo aumentaría repetición de una tarea que ya cumplen las clases.

Saludos!!