Gramática avanzada de CSS

Agrupación de selectores

Puedes agrupar selectores, de modo que los selectores agrupados puedan compartir declaraciones comunes. Separa los selectores que necesitan agruparse con comas. En el siguiente ejemplo, hemos agrupado todos los elementos de título. Todos los elementos de título son verdes.

h1,h2,h3,h4,h5,h6 {
  color: verde;
  }

Herencia y problemas

Según CSS, los elementos secundarios heredan propiedades del elemento padre. Pero no siempre funciona de esta manera. Mire la siguiente regla:

body {
     font-family: Verdana, sans-serif;
     }

Según esta regla, el elemento body del sitio utilizará la fuente Verdana (si el sistema del visitante tiene esta fuente).

A través de la herencia de CSS, los elementos secundarios heredarán las propiedades del elemento más alto (en este caso, el body) que posee (estos elementos secundarios como p, td, ul, ol, ul, li, dl, dt y dd). No se necesitan reglas adicionales, todos los elementos secundarios del body deben mostrar la fuente Verdana, y también los elementos secundarios de los elementos secundarios. Y en la mayoría de los navegadores modernos, es así.

Pero en los años sangrientos de la batalla de navegadores, esto no siempre ocurría, ya que en aquella época el apoyo a los estándares no era la opción prioritaria de las empresas. Por ejemplo, Netscape 4 no admite la herencia, no solo ignora la herencia, sino que también ignora las reglas aplicadas al elemento body. IE/Windows aún tenía problemas relacionados hasta IE6, y los estilos de fuente dentro de las tablas se ignoraban. ¿Qué debemos hacer entonces?

Trate amablemente a Netscape 4

Por suerte, puedes manejar el problema de que los navegadores antiguos no entienden la herencia utilizando una regla redundante que llamamos "Trate amablemente a Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {}}
     font-family: Verdana, sans-serif;
     }

Los navegadores 4.0 no pueden entender la herencia, pero pueden entender los selectores de grupo. Aunque esto puede desperdiciar algo de ancho de banda de los usuarios, si es necesario para soportar a los usuarios de Netscape 4, es necesario hacerlo.

¿Es la herencia una maldición?

¿Qué hacer si no desea que la fuente "Verdana, sans-serif" se herede a todos los elementos secundarios, por ejemplo, si desea que la fuente del párrafo sea Times. No hay problema. Cree una regla especial para p, así se liberará de las reglas del elemento padre:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }