Aquí hay un ejemplo que no entiendo:
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
Me parece que el width: 460px
se aplica a todas las clases mencionadas anteriormente. Pero ¿por qué algunas clases están separadas por una coma ( ,
) y algunas solo por un espacio?
Supongo que el width: 460px
se aplicará solo a aquellos elementos que combinen clases en la forma mencionada en el archivo CSS. Por ejemplo, se aplicará a
. ¿Es correcta esta suposición?
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
Eso dice “make all .grid_6’s dentro de .container_12’s y all .grid_8’s dentro de .container_16’s 460 pixels de ancho.” Por lo tanto, ambos de los siguientes harán lo mismo:
460px Wide 460px Wide
En cuanto a las comas, está aplicando una regla a varias clases, como esta.
.blueCheese, .blueBike { color:blue; }
Es funcionalmente equivalente a:
.blueCheese { color:blue } .blueBike { color:blue }
Pero reduce la verbosidad.
.container_12 .grid_6 { ... }
Esta regla coincide con un nodo DOM con la clase container_12
que tiene un descendiente (no necesariamente un elemento secundario) con la clase grid_6
, y aplica las reglas CSS al elemento DOM con la clase grid_6
.
.container_12 > .grid_6 { ... }
Poniendo >
entre ellos dice que el nodo grid_6
debe ser un hijo directo del nodo con la clase container_12
.
.container_12, .grid_6 { ... }
Una coma, como han dicho otros, es una forma de aplicar reglas a muchos nodos diferentes a la vez. En este caso, las reglas se aplican a cualquier nodo con una clase de container_12
o grid_6
.
No es exactamente lo que se preguntó, pero tal vez esto ayude.
Para aplicar un estilo a un elemento solo si tiene ambas clases, su selector no debe usar espacio entre los nombres de clase.
Por ejemplo:
.class1.class2 { color: #f00; } .class1 .class2 { color: #0f0; } .class1, .class2 { font-weight: bold; }
Bold Red Text Bold Text (not red) Bold Green Text
Coma agrupa las clases (aplica el mismo estilo a todas ellas), un espacio vacío indica que el siguiente selector debe estar dentro del primer selector.
Por lo tanto
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
aplica ese estilo solo a la clase .grid_6
que está dentro de la clase .container_12
y a la clase .grid_8
que está dentro de .container_16
.
El width: 460px;
se aplicará al elemento con la clase .grid_8
, contenida dentro de los elementos con la clase .container_16
, y los elementos con la clase .grid_6
, contenidos dentro de los elementos con .container_12
.
El espacio significa patrimonio, y la coma significa ‘y’. Si coloca propiedades con un selector como
.class-a, .class-b
, tendrá las propiedades aplicadas a los elementos con cualquiera de las dos clases.
Espero que haya ayudado.
Tienes cuatro clases y dos selectores en tu ejemplo:
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
Así que .container_12
y .grid_6
son ambas clases, pero el width: 460px
la regla width: 460px
solo se aplicará a los elementos que tengan la clase .grid_6
que sean descendientes de un elemento que tenga la clase .container_16
.
Por ejemplo:
This has a width of 480px.
This has an unknown width.
Lo anterior significa que está aplicando estilos a dos clases, indicadas por la coma.
Cuando ve dos elementos uno al lado del otro no separados, puede suponer que se refiere a un área dentro de un área. Entonces, en el ejemplo anterior, este estilo solo se aplica a las clases grid_6 dentro de las clases container_12 y grid_8 dentro de las clases container_16.
en el ejemplo:
This is not effected This is effected.
El primer grid_6 no se verá afectado mientras que el segundo grid_6 lo hará porque está dentro de un contenedor_12.
Una statement como
#admin .description p { font-weight:bold; }
Solo aplicaría el negrita a
tags dentro de áreas que tienen “descripción” de clase que están dentro de un área con id “admin”, como:
This is bold
.container_12 .grid_6, .container_16 .grid_8 { width: 460px; }
width:460px
solo se aplicará a .grid_6
y .grid_8
Editar: Aquí hay un muy buen artículo para ti
- Cómo utilizar Font Awesome desde webjars.org con JSF
- jQuery CSS – Escribir en el -tag
- Error de posicionamiento relativo / absoluto de IE7 con contenido de página modificado de forma dinámica
- CSS Page-Break no funciona en todos los navegadores
- CSS ¿el ancho incluye el relleno?
- Anular el estilo del cuerpo para el contenido en un iframe
- ¿IE 8 tiene un límite en el número de hojas de estilo por página?
- Retraso de animación CSS en repetición
- Fondo de dos tonos dividido por línea diagonal usando css
- tamaño de fondo en propiedad taquigráfica de fondo (CSS3)
- Cómo crear una imagen fluida trapezoidal con CSS?