¿Puedes notar la diferencia entre estos dos selectores?
#header.callout { }
#header .callout { }Se ven casi idénticos, pero el de arriba no tiene espacio entre #header y .callout mientras que el de abajo lo hace. Esta pequeña diferencia marca una gran diferencia en lo que hace. Para algunos de ustedes, ese selector superior puede parecer un error, pero en realidad es un selector bastante útil. Veamos la diferencia, lo que significa ese selector superior y exploremos más de ese selector de estilo.
Aquí está el “inglés simple” de #header .callout:
Seleccione todos los elementos con la llamada de nombre de clase que sean descendientes del elemento con un ID de encabezado.
Aquí está el “inglés simple” de #header.callout:
Seleccione el elemento que tiene un ID de encabezado y también un nombre de clase de llamada.
Quizás este gráfico lo aclare más:
Combinaciones de clases e ID
El gran punto aquí es que puede apuntar a elementos que tienen combinaciones de clases e ID uniendo esos selectores sin espacios.
Selector de ID y clase
Como cubrimos anteriormente, puede orientar elementos mediante una combinación de ID y clase.
<h1 id="one" class="two">This Should Be Red</h1>#one.two { color: red; }Selector de clase doble
Apunta a un elemento que tenga todas las clases múltiples. Se muestra a continuación con dos clases, pero no se limita a dos.
<h1 class="three four">Double Class</h1>.three.four { color: red; }Múltiplos
No estamos limitados a solo dos aquí, podemos combinar tantas clases e ID en un solo selector como queramos.
.snippet#header.code.red { color: red; }Aunque tenga en cuenta que se está volviendo un poco ridículo =)
Ejemplo
Entonces, ¿qué tan útil es todo esto realmente? Especialmente con las identificaciones, se supone que son únicas de todos modos, entonces, ¿por qué necesitarías combinarlas con una clase? Admito que los casos de uso para las versiones de ID son más delgados, pero ciertamente hay usos. Uno de ellos es anular estilos fácilmente.
#header { color: red; }
#header.override { color: black; } El segundo apunta al mismo elemento, pero anula el color, en lugar de tener que usar:
.override { color: black !important }o quizás anteponer el selector con algo aún más específico.
Más útiles son las clases múltiples y usarlas en el estilo CSS “orientado a objetos” que está de moda últimamente. Digamos que tienes un montón de divs en una página y usaste varios nombres de clases descriptivos en ellos:
<div class="red border box"></div>
<div class="blue border box"></div>
<div class="green border box"></div>
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>
<div class="border box"></div>Todos comparten la clase “caja”, que quizás establece un ancho o una textura de fondo, algo que todos tienen en común. Luego, algunos de ellos tienen nombres de colores como clases, esto sería para controlar los colores usados dentro de la caja. Quizás verde significa que el cuadro tiene un fondo verdoso y un texto verde claro. Algunos de ellos tienen un nombre de clase de “frontera”, presumiblemente estos tendrían un borde en ellos, mientras que el resto no.
Así que configuremos algo:
.box { width: 100px; float: left; margin: 0 10px 10px 0; }
.red { color: red; background: pink; }
.blue { color: blue; background: light-blue; }
.green { color: green; background: light-green; }
.border { border: 5px solid black; }Genial, tenemos una buena caja de herramientas aquí, donde podemos crear nuevas cajas y tenemos una variedad de opciones, podemos elegir un color y si tiene un borde o no simplemente aplicando algunas clases bastante semánticas. Tener esta caja de herramientas de nombre de clase también nos permite apuntar a combinaciones únicas de estas clases. Por ejemplo, tal vez ese borde negro no funciona en los cuadros rojos, solucionemos eso:
.red.border { border-color: #900; }
El color del borde en el cuadro rojo cambió porque tenía tanto la clase roja como la clase de borde
Basado en esta página de demostración.
Especificidad
También es importante tener en cuenta aquí que los valores de especificidad de selectores como este tendrán el mismo peso que si estuvieran separados. Esto es lo que les da el poder primordial como en el ejemplo anterior.
Compatibilidad del navegador
Todos los buenos navegadores actuales admiten esto, así como IE hasta la versión 7. IE 6 es bastante extraño. Selecciona basándose en el último selector de la lista. Entonces, “.red.border” seleccionará basándose solo en “.border”, lo que arruina un poco las cosas. Pero si es compatible con IE 6, de todos modos está acostumbrado a este tipo de payasadas y puede arreglarlo con estilos condicionales.