Foros del Web » Creando para Internet » CSS »

Selector de ID doble

Estas en el tema de Selector de ID doble en el foro de CSS en Foros del Web. Buenas gente, espero esten bien. Veran, queria saber si habria manera de hacer un selector de Doble ID (se que se puede), pero lo que ...
  #1 (permalink)  
Antiguo 15/01/2018, 05:38
 
Fecha de Ingreso: agosto-2015
Ubicación: Rosario - Argentina
Mensajes: 418
Antigüedad: 4 años, 9 meses
Puntos: 11
Selector de ID doble

Buenas gente, espero esten bien.

Veran, queria saber si habria manera de hacer un selector de Doble ID (se que se puede), pero lo que quiero es que seleccione un ID y el "doble" que sea cualquiera...

Me explico, imaginen la situacion en donde quiero darle un aspecto x a una ventana.
Código CSS:
Ver original
  1. #window{
  2.     background-color:rgba(255,255,255,1);
  3.     border:1px solid rgba(0,0,0,0.5);
  4.     border-radius:2px 2px;
  5.     width:50vmin;
  6.     height:30vmin;
  7. }

Perfecto, la ventana #window tiene un aspecto, pero imaginen que ahora quiero darle un aspecto diferente, ya que esta ventana la usare en muchas ocaciones y su aspecto ha de variar, lo haria asi..
Código CSS:
Ver original
  1. #window#aspect1{
  2.     background-color:rgba(255,255,255,0.5);
  3.     border:1px solid rgba(0,0,0,0.2);
  4.     border-radius:0px 0px;
  5.     width:30vmin;
  6.     height:15vmin;
  7. }

hasta aqui bien, puedo usar la base de window y retocarla con otro ID sin modificar la original, ahora me sirve para dos usos.
Pero imaginen ahora que tengo varias... y claro, cada #window tiene hijos, por lo que hacer lo anterior con cada una y mas teniendo en cuenta los hijos seria un volon de pelo.

¿podria existir algo que facilite el tema de los hijos?
por ejemplo (esto es una forma de que entiendan no sirve de nada)
Código CSS:
Ver original
  1. #window#aspect2:child*{
  2.     background-color:rgba(255,255,255,1);
  3.     border:1px solid rgba(0,0,0,0.5);
  4.     border-radius:2px 2px;
  5.     width:50vmin;
  6.     height:30vmin;
  7. }

De esta manera me ahorraria hacer esto
Código CSS:
Ver original
  1. #window#aspect2{
  2.     background-color:rgba(255,255,255,1);
  3.     border:1px solid rgba(0,0,0,0.5);
  4.     border-radius:2px 2px;
  5.     width:50vmin;
  6.     height:30vmin;
  7. }
  8. #window#aspect2 .image{
  9.     background-image:....;
  10. }
  11. #window#aspect2 .title{
  12.     color:....;
  13. }

¿Seria posible?
  #2 (permalink)  
Antiguo 15/01/2018, 10:22
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 6 años, 6 meses
Puntos: 39
Respuesta: Selector de ID doble

Hay una solución y perdón de antemano decir esto tan seco, pero:

No uses id, usa clases.

Es decir, un ID es precisamente para un elemento único y no con variantes, con tipos, o similares, ni nada. Los id, son el último paso en las buenas prácticas usando css y hoy día, solo se recomienda su uso para combinarlo con javascript. El uso de clases es muy sencillo y permite la multiclase sin ningún problema y de hecho en tu ejemplo de caso de uso aplica muy bien y de hecho jejeje es la solución que siempre vas a encontrar en internet si haces una pequeña búsqueda. Ejemplo de uso con clases:

Código HTML:
Ver original
  1. <div class="window aspect1"></div>
  2. <div class="window aspect2"></div>

Código CSS:
Ver original
  1. .window.aspect1{
  2.     background-color:rgba(255,255,255,0.5);
  3.     border:1px solid rgba(0,0,0,0.2);
  4.     border-radius:0px 0px;
  5.     width:30vmin;
  6.     height:15vmin;
  7. }
  8.  
  9. .window.aspect2{
  10.     background-color:rgba(255,255,255,1);
  11.     border:1px solid rgba(0,0,0,0.5);
  12.     border-radius:2px 2px;
  13.     width:50vmin;
  14.     height:30vmin;
  15. }

Como mucho puedes hacer algo así:

Código HTML:
Ver original
  1. <div id="window1" class="aspect1"></div>
  2. <div id="window2" class="aspect2"></div>

Código CSS:
Ver original
  1. [id*="window"].aspect1{
  2.     background-color:rgba(255,255,255,0.5);
  3.     border:1px solid rgba(0,0,0,0.2);
  4.     border-radius:0px 0px;
  5.     width:30vmin;
  6.     height:15vmin;
  7. }
  8.  
  9. [id*="window"].aspect2{
  10.     background-color:rgba(255,255,255,1);
  11.     border:1px solid rgba(0,0,0,0.5);
  12.     border-radius:2px 2px;
  13.     width:50vmin;
  14.     height:30vmin;
  15. }

Pero nunca así, porque no es valido que hayan dos elementos con el mismo ID:

Código HTML:
Ver original
  1. <div id="window" class="aspect1"></div>
  2. <div id="window" class="aspect2"></div>

Así veras que lo usan todos los frameworks o templates, proyectos importantes y referentes.

Es muy sencillo y de hecho si lo haces como pretendes (usando el mismo id o multi ids para varios elementos) vas a ver alarmas en todos los validadores de marcado oficiales.

Éxitos en tu proyecto y feliz día.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital

Última edición por g3kdigital; 15/01/2018 a las 10:28
  #3 (permalink)  
Antiguo 15/01/2018, 11:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 17 años, 10 meses
Puntos: 2113
Respuesta: Selector de ID doble

Yo te diría que uses IDs para lo que son, y las clases para lo que son. También ponerle nombres descriptivos sería bueno; para cuando te olvides dentro de unos meses y quieras retocar algo, o para el que venga después.

En tu caso, lo lógico sería #window.low_opacity.

Ahora, para responder a la pregunta original, que entiendo es cómo puedas simplificar código y no repetir las cosas hasta la saciedad: usa algún preprocesador CSS. A mí me gusta Sass, a otros Stylus, a otros LESS…

Código CSS:
Ver original
  1. // Creas tu mixin
  2. @mixin window($opacity, $border_opacity, $border_radius, $width, $height)
  3.   background-color: rgba(255,255,255,$opacity)
  4.   border: 1px solid rgba(0,0,0,$border_opacity)
  5.   border-radius: $border_radius
  6.   width: $width
  7.   height: $height
  8.  
  9. // Y luego creas tus estilos
  10. #window
  11.   &.low_opacity
  12.     +window(0.5, 0.2, 0, 30vmin, 15vmin)
  13.   &.otra_cosa
  14.     +window(1, 0.5, 5px, 30vmin, 15vmin)
  15.   // etc

Se pueden mejorar e incluso reducir alguna cosa, pero como ejemplo creo que vale.
__________________
(:

Etiquetas: color, doble, selector
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:31.