tierra de nómadas - tallerWeb

Principios básicos de CSS

Lo básico

A medida que se ha ido generalizando el uso de las Hojas de Estilo en Cascada he observado en demasiadas ocasiones un fenómeno sintomático de la premura con la que, a veces, se acometen los proyectos: su nula optimización y su escaso aprovechamiento. Y, escarbando en el problema, he llegado a la conclusión (quizás cierta, quizás errónea) de que la causa reside en la desatención hacia los conceptos iniciales, tales como regla, declaración, propiedad, cascada, herencia, agrupamiento o especificidad. La consecuencia es fácil de observar: hojas excesivamente largas, redundantes, sin selectores simples, con exceso de clases y, lo que es peor, muy poco eficaces.

La observancia de media docena de puntos puede marcar una diferencia abismal, tanto por el ahorro drástico de trabajo como por la mejora de los resultados. Además de ese objetivo principal, este taller ofrece un avance de ciertas características del tercer nivel de CSS (especificadas oportunamente). Y antes de entrar en materia, hay que advertir que, debido a la estrecha relación entre los diferentes elementos del lenguaje, es inevitable que para definir o desarrollar un concepto se haga referencia a otro que todavía no ha sido tratado.

Reglas

Una hoja de estilos es, en esencia, un conjunto de estamentos o reglas. Hay dos tipos: las reglas arroba y los juegos de reglas. Aparcaremos las primeras por un momento (irán apareciendo paulatinamente en escena) para que nadie se asuste antes de tiempo. Los juegos de reglas o simplemente reglas son las estructuras más corrientes. Constan de un selector y un conjunto de declaraciones. Los selectores constituyen el nexo de comunicación entre la hoja de estilo y el documento HTML o XML, al especificar o delimitar un conjunto de elementos (o de porciones de elementos) al cual aplicar el estilo. Por su parte, una declaración consta de una propiedad y su correspondiente valor, separados por dos puntos (:). Si hay varias declaraciones se separan mediante punto y coma (;). El conjunto de declaraciones debe estar encerrado entre carácteres de llave ({) y (}), en lo que llamaremos bloque. Por tanto, podemos decir que una regla es un selector seguido de un bloque de declaraciones. Un ejemplo sencillo:

h1 { text-align:center; color:#00A; }

El anterior fragmento está formado por una única regla, que consta a su vez del selector h1 y de un bloque constituido por dos declaraciones, que responden a las propiedades text-align y color, respectivamente. Su funcionamiento es, igualmente, muy simple: los estilos que resultan de las dos declaraciones serán aplicados a los elementos indicados por el selector, en este caso a los h1.

Medios

La variedad de medios a través de los cuales puede transmitirse la información de una página web hace necesaria una especificación sensible a esa variedad. Por el momento, los tipos de medio reconocidos son:

• screen: monitores de ordenador.
• tv: pantallas de televisión (menos resolución, menos posibilidades de desplazamiento y menor interactividad que los monitores de ordenador).
• handheld: dispositivos manuales, como teléfonos, ordenadores de bolsillo, etc..
• projection: presentaciones proyectadas mediante el uso de transparencias o dispositivos especiales.
• tty: dispositivos de consola o impresoras que utilizan una rejilla de carácteres de espacio fijo.
• print: impresoras de uso general.
• embossed: impresoras especiales con sistema braille.
• braille: dispositivos táctiles en sistema braille.
• aural: lectores o sintetizadores de voz.
• all: indicado para aquellas propiedades que encajen en todos los dispositivos (si es que eso es posible). Omitir el tipo de medio provoca el mismo resultado.

El tipo o tipos de medio al que va dirigida una hoja de estilo puede especificarse en el atributo media en los elementos link o style (separados por comas en el caso de ser más de uno):

<link rel="StyleSheet" type="text/css" media="screen" href="pantalla.css" />

<style type="text/css" media="screen,print">

También podemos referirnos a diferentes tipos de medio dentro de un mismo archivo (o elemento style) haciendo uso de la regla arroba @media:

@media screen, print {
  h2 { margin-top:2em; }
}
@media print {
  h2 { page-break-after:avoid; }
}
@media aural {
  h2 { pause:200ms 50ms; }
}

Aunque esta última modalidad puede parecer más cómoda, separar las hojas de los distintos medios en archivos diferentes tiene sus ventajas. Por ejemplo, la aplicación sólo descargará la información de estilo que realmente utilice.

Naturalmente no es obligatorio realizar hojas de estilo para todos los medios. Hay que tener en cuenta que las aplicaciones ya tienen su hoja de estilo predeterminada y el usuario quizás aporte también la suya. Por tanto la falta de hojas de estilo para tal o cual medio no entraña problemas de accesibilidad. Lo que, sin ser obligatorio, sí es recomendable, es especificar siempre el tipo de medio. De lo contrario se pueden producir presentaciones no deseadas en situaciones no tenidas en cuenta. Sin ir más lejos, la típica vorágine de colores y demás efectos visuales para el monitor de un ordenador puede ser un desastre en una impresora.

Cascada

La Cascada es un modelo mediante el cual es posible la convivencia de varias hojas de estilo en el mismo documento, las cuales pueden tener tres orígenes diferentes (y sólo uno de ellos es competencia/privilegio del diseñador):

• El autor incluye la información de estilo vinculando archivos a cada documento o, en el caso de documentos HTML, también insertándola dentro del mismo.
• El usuario puede aportar su hoja de estilos, para lo cual la aplicación puede ponérselo más o menos difícil. También es posible que esta última cuente con mecanismos alternativos. Esto no se debe confundir con los procesos de elección de hojas de estilo que facilitan algunas páginas web, porque aunque sea el usuario el que elige, el origen sigue siendo el autor.
• La aplicación (comúnmente el navegador) utiliza una hoja de estilos predeterminada, encargada, por ejemplo, de teñir de azul los enlaces no visitados o de inclinar las letras de los elementos em. En ciertos casos esa hoja de estilo no existe realmente (son simplemente unos valores predeterminados), pero el comportamiento es el mismo.

Para el autor no existe límite en cuanto al número de archivos (y, en el caso de documentos HTML, elementos o atributos style) que puede utilizar en un mismo documento, lo cual le ofrece muchas posibilidades para sistematizar y ahorrar código. Además, es posible vincular un documento a más hojas de estilo sin modificarlo siquiera, por medio de la regla arroba @import. En el ejemplo siguiente, puesto al principio de una hoja de estilo (la única posición legal de una regla de este tipo es al principio, o bien detrás de otra regla @import) se procesa el contenido del archivo importar.css. A efectos prácticos, es como sustituir la regla @import por las reglas que contenga dicho archivo:

@import "importar.css";

Adicionalmente puede especificarse el tipo de medio para cada archivo, lo cual permite evitar las descargas innecesarias:

@import "visual.css" screen,projection,tv;
@import "impreso.css" print;

Cuando varias reglas afectan a la misma propiedad del mismo elemento en el mismo medio (de otro modo no existe ningún conflicto), el "dilema" se soluciona aplicando unas normas de cascada, que se rigen por el siguiente orden estricto:

1. Origen: La información de la hoja de estilo de la aplicación es sustituida por la del usuario, y esta a su vez por la del autor.
2. Especificidad: Si el origen es el mismo, las reglas más específicas sustituyen a las más generales. Esto se explicará con más detalle en el apartado Especificidad.
3. Aparición: Si no se ha podido dirimir el conflicto mediante los dos criterios anteriores, la última regla en ser especificada es la que cuenta.

El lector avispado habrá podido observar que el primero de los criterios deja al usuario indefenso ante los delirios de cualquier autor. Para evitarlo, se puede aumentar el peso de una declaración agregando al final de ésta el calificativo !important. La regla siguiente, colocada en la hoja de estilo del usuario, obliga a la aplicación a subrayar los enlaces, aunque el autor especifique que no debe ser así:

a { text-decoration:underline !important; }

En el primer nivel de CSS una declaración de autor marcada como importante primaba sobre una declaración de usuario marcada como importante. Esto fue corregido en el nivel 2, de manera que en la actualidad el orden de importancia de las declaraciones, según su origen, es (de menor a mayor):

1. Declaración en hoja de estilo de aplicación.
2. Declaración convencional en hoja de estilo de usuario.
3. Declaración convencional en hoja de estilo de autor.
4. Declaración importante en hoja de estilo de autor.
5. Declaración importante en hoja de estilo de usuario.

Herencia

Algunas propiedades pueden heredarse automáticamente del elemento padre. Esto quiere decir, entre otras cosas, que una declaración puede afectar, no sólo a los elementos que resulten del selector correspondiente, sino también a sus descendientes. La especificación define, para cada propiedad, si se hereda o no. En algunas ocasiones será fácil deducir la herencia sin mirar la especificación, por ejemplo las propiedades relacionadas con el formato visual (posición, bordes, tamaño, fondo, margen, etc.), no se heredan (de lo contrario sería un caos). Pero lo mejor es asegurarse. Puede prevenir muchos quebraderos de cabeza, y también puede ahorrarnos muchas declaraciones redundantes.

Incluso para todas aquellas propiedades que no la especifican, es posible forzar la herencia utilizando el valor inherit. El ejemplo siguiente asignaría al elemento identificado como Cuadro la misma altura que se ha computado para su elemento padre (si es que eso tiene sentido en ese contexto):

#Cuadro { height:inherit; }

Cómputo

Durante el proceso de representación por parte de la aplicación, los valores de la hoja de estilo sufren una "metamorfosis" en la que entra en juego un posible cálculo por parte de la aplicación (si el valor especificado lo requiere) y sus propias limitaciones y carácterísticas. La regla del ejemplo siguiente se aplica, en un medio de pantalla, a un elemento identificado como Caja cuyo bloque de contención tiene 612 píxeles de ancho:

#Caja { width:85%; }

La aplicación puede verse obligada a repetir el cálculo de valores en determinadas circunstancias, por ejemplo cuando el usuario cambia el tamaño del lienzo. Por otro lado, para ciertas propiedades o tipos de valor, este esquema de transformación no tiene sentido.

Lo valores computados tienen una importancia fundamental en la herencia, dado que son los que realmente se pasan de un elemento a otro. Obsérvese el siguiente ejemplo.

p { font-size:0.8em; }

A partir de la regla anterior, la aplicación calculará un tamaño para la fuente de los párrafos. Como esa propiedad se hereda, pasará a sus hijos (elementos a, em, strong, etc.). Pero el valor heredado por dichos elementos será el que se haya computado para el párrafo (por ejemplo 12.8px), no el especificado (0.8em). Pensándolo un poco, lo contrario provocaría efectos muy poco deseables.

Como complemento a este apartado y a los dos anteriores, hay una página de ejemplos de asignación de valores, cascada y herencia.

Selectores

Afortunadamente contamos con diferentes modalidades de selector, que por supuesto aumentan notablemente las posibilidades de ejemplos anteriores. Son las siguientes:

Universal

El selector universal es el carácter de asterisco (*), y, como su propio nombre indica, selecciona todos los elementos del documento. El asterisco puede omitirse si va seguido de un selector de identificador, de atributo (incluyendo clases) o de pseudo-clase.

De tipo (Por ejemplo: p )

Simplemente marcan una equivalencia entre tipos de elemento y el estilo a aplicar. La regla del ejemplo afectará a todos los elementos p. A pesar de su sencillez, este tipo de selector ya posee una potencia importante, y debería ser el principal recurso en explotar cuando se trata de establecer la "línea" de un sitio entero, porque es independiente de las particularidades de cada documento.

De descendencia (Por ejemplo: table strong )

Seleccionan elementos que son descendientes (hijos, nietos, etc.) de otro elemento dado. Dicho en otras palabras, tomando el documento como un conjunto de "cajas", elementos que se encuentran dentro de otro, directamente o no. En el ejemplo dado, el estilo se aplica a cualquier elemento strong que podamos encontrar dentro de una tabla. Por lógica cualquiera de ellos será también descendiente, como mínimo, de un elemento td o th, y también de un elemento tr, pero eso es indiferente.

De hijos (Por ejemplo: ol>li )

Similar al anterior tipo, pero en este caso la selección queda restringida a descendientes inmediatos. La regla del ejemplo afectaría a los elementos li de cualquier lista ordenada, pero no a los de una lista desordenada aunque estuviese anidada a su vez en una lista ordenada.

De adyacentes directos (Por ejemplo: h5+p )

Permiten referirse a elementos hermanos consecutivos, lo cual puede ser útil para crear estilos en función de los elementos vecinos. En el ejemplo se utiliza un selector de este tipo para establecer el estilo de los párrafos que aparezcan inmediatamente después de un encabezado de nivel 5.

De adyacentes indirectos (CSS3) (Por ejemplo: th~td )

Análogo al selector de adyacentes directos pero omitiendo la condición de ser consecutivo. El ejemplo establece un estilo para todas aquellas celdas td que fluyan a continuación de una celda th compartiendo el mismo elemento padre, o sea, las celdas normales cuya fila comience con una celda de encabezado (teniendo en cuenta la idiosincrasia de los elementos en una tabla).

De atributos

Una posibilidad interesante es seleccionar elementos en función de sus atributos, bien con independencia del valor de dicho atributo (simplemente por tener asignado ese atributo), o bien siguiendo diferentes criterios de equivalencia:

• Independientes del valor (Por ejemplo: span[onclick] ).
• De coincidencia íntegra (Por ejemplo: input[type="text"] ).
• De coincidencia parcial (CSS3) (Por ejemplo: img[title*="mapa"] ).
• De comienzo de cadena (CSS3) (Por ejemplo: del[datetime^="199"] ).
• De final de cadena (CSS3) (Por ejemplo: a[href$=".zip"] ).
• De valor individual (Por ejemplo: p[class~="Clase"] ).
• De valor inicial (Por ejemplo: td[lang|="en"] ).

Los dos últimos patrones responden a tipos de atributo que admiten varios valores separados por espacios o por guiones respectivamente. La regla del ejemplo de valor individual respondería a párrafos con atributos class como "Primera Clase", "Clase","Clase Rara", etc. (como veremos a continuación hay otra forma más sencilla de trabajar con clases). El selector de atributo de valor inicial está especialmente pensado para seleccionar elementos en función de su lenguaje, pero independientemente del subcódigo de lenguaje. En el ejemplo, se correspondería con celdas cuyo atributo lang fuese "en", pero también "en-US", etc..

De identificador (Por ejemplo: #Identificador )

Sirven, como es lógico, para establecer el estilo de un elemento identificado en el código HTML o XML mediante el atributo id. Recordemos que dicho valor debe ser único en cada documento.

Tal y como hemos destacado antes, existe una forma más simple de usar selectores de clase, pero sólo trabajando con documentos HTML. Se trata del modelo presente el primer nivel de CSS, que consiste en poner un punto entre el selector de tipo y el nombre de la clase. Como los elementos que comparten clase en un documento no han de ser forzosamente del mismo tipo, podemos referirnos a cualquier elemento de una clase (utilizando el selector universal (*) o, directamente, omitiéndolo) o especificar además un tipo de elemento. En el ejemplo siguiente asignamos las propiedades font-size y background para cualquier elemento de la clase seleccionada, la propiedad text-align sólo para los párrafos de esa clase, y la propiedad border sólo para las listas ul de esa clase.

.Especial { font-size:1.5em; background:yellow; }
p.Especial { text-align:center; }
ul.Especial { border:2px solid black; }

En HTML, el atributo class puede contener un lista de valores separados por espacios. Por tanto es posible que, en algún momento, queramos seleccionar dos o más clases a la vez en una regla:

.Especial.Crucial { font-weight:bolder; }

Cuando diferentes selectores tienen declaraciones iguales podemos agruparlos en una única regla separando los selectores por comas. El resultado de los dos cuadros siguientes es el mismo:

ul { text-align:justify; font:0.8em Helvetica,sans-serif; }
ol { text-align:justify; font:0.8em Helvetica,sans-serif; }
dl { text-align:justify; font:0.8em Helvetica,sans-serif; }

ul, ol, dl { text-align:justify; font:0.8em Helvetica,sans-serif; }

Lógicamente, todo el "arsenal" recopilado hasta el momento puede combinarse. La regla siguiente selecciona por un lado los elementos em descendientes de cualquier elemento cuya clase sea "Destacar", el cual a su vez desciende del elemento cuyo identificador es "Principal", y por otro cualquier elemento de lista que sea descendiente de otro elemento de lista.

#Principal .Destacar em, li li { color:blue; }

Llegados a este punto, y vista la potencia que albergan los diferentes selectores, conviene plantearse un método de trabajo que no dependa más de lo necesario de clases e identificadores. Se trata de que el documento HTML sea independiente de la presentación, y un exceso de clases, por ejemplo, provoca una dependencia de la propia hoja de estilos, además de poder afectar a la propia estructura de contenidos. Sin desmerecer lo dicho, pero antes de crearse inciertas expectativas, hay que señalar que, por obscuras razones, el popular navegador Internet Explorer sólo reconoce los selectores del primer nivel de CSS: de tipo, de descendencia, de identificador y la forma tradicional de selector de clase. No obstante, y respecto a lo visto en este apartado, podemos clarificar conceptos o simplemente testear el navegador de turno en el documento ejemplos de selectores.

Pseudo-clases y pseudo-elementos

Las pseudo-clases (nada que ver con el atributo class) y los pseudo-elementos son abstracciones que amplían las posibilidades de selección de este lenguaje. Su utilización hace posibles ciertos efectos y funciones que, de otro modo, precisarían de un exceso de "etiquetado" en el código HTML o bien de trasnochadas líneas de script en el lado del cliente.

A excepción de las pseudo-clases estructurales y, quizás, la de lenguaje, estamos hablando de seleccionar elementos a partir de datos o situaciones que no se pueden deducir directamente de la jerarquía del documento. La sintaxis es similar, y consiste en agregar el identificativo de la pseudo-clase o del pseudo-elemento, que comienza siempre con el carácter ":" (dos carácteres ":" seguidos obligatoriamente para los pseudo-elementos a partir del nivel 3, de próxima aprobación) al selector correspondiente.

Hasta aquí lo que tienen en común. Las diferencias entre ambos conceptos son:

• Las pseudo-clases restringen el conjunto de elementos que responde al selector de acuerdo a un patrón o carácterística. En cierto modo podrían definirse como filtros.
• Los pseudo-elementos seleccionan una porción de todos y cada uno de los elementos que responden al selector (además sólo pueden aparecer después del sujeto de éste).

Tomemos como ejemplo la siguiente regla (la cual es un "best-seller" aun entre los que no han oído hablar de una pseudo-clase):

a:hover { text-decoration:none; }

Lo que dicta es que se elimine cualquier decoración (el subrayado, por ejemplo) de los vínculos cuando se pase el puntero por ellos. Sin embargo, algo que se suele pasar por alto es que la regla anterior no distingue entre enlaces origen y enlaces destino (sin atributo href). Para referirse sólo a los primeros podría valer cualquiera de las dos reglas siguientes:

a[href]:hover { text-decoration:none; }
a:link:hover, a:visited:hover { text-decoration:none; }

Y la segunda de las anteriores nos sirve para comprobar que dos o más pseudo-clases pueden convivir en el mismo selector. Incluso puede haber además un pseudo-elemento (pero sólo al final). La siguiente regla afecta al tamaño de la primera letra de todas las celdas que sean la primera de su ascendente (o sea, de su fila) y cuyo lenguaje humano hay sido especificado como español:

td:lang(es):first-child:first-letter { font-size:2.5em; }

La mayoría de las pseudo-clases, como se puede ver a continuación, pertenecen al nivel 3 de CSS, en concreto al módulo Selectors, que ya ha superado la etapa de borrador y es candidato a recomendación en el momento de escribir esto. Por eso algunos modelos de navegador van implementando algunas de ellas.

Pseudo-clases de vínculo

Aplicables a elementos que actúen como origen de enlace. Las aplicaciones suelen diferenciar si los destinos han sido visitados con anterioridad. Mediante la implementación de las dos pseudo-clases siguientes podemos seleccionar los enlaces de acuerdo a dichos estados:

• :link, enlaces no visitados.
• :visited, enlaces visitados.

Estas dos pseudo-clases son mutuamente excluyentes, esto es, un elemento no puede responder a ambas a la vez.

Pseudo-clases dinámicas

Relacionadas con cambios en los elementos provocados por ciertas acciones del usuario:

• :hover, el elemento es señalado con un dispositivo apuntador (por ejemplo, pasar el cursor por encima).
• :active, el elemento es activado (por ejemplo mientras se hace clic con el ratón).
• :focus, el elemento tiene el "foco".

Pseudo-clase de destino :target(CSS3)

Si la URL contiene un ancla o enlace interno (carácter "#" seguido del identificador de fragmento), esta pseudo-clase selecciona, si es que existe, el elemento que actúa como destino.

Pseudo-clase de lenguaje :lang( )

Selecciona elementos en función del lenguaje usado, especificado entre los paréntesis mediante el código de lenguaje correspondiente. Ese lenguaje se habrá podido establecer en el documento a través de atributos lang o xml:lang, mediante elementos meta, o incluso a través de encabezados HTML.

Pseudo-clases de estado

Enfocadas fundamentalmente a controles interactivos, como los elementos de un formulario.

• :enabled (CSS3), el elemento está disponible, puede usarse.
• :disabled (CSS3), el elemento no está disponible (excluyente con la anterior).
• :checked (CSS3), el elemento (input de tipo radio o checkbox) está marcado.
• :indeterminate (CSS3), el elemento (input de tipo radio o checkbox) está en estado mixto o indeterminado (éste no puede ser provocado por el usuario, pero sí por la aplicación).

Pseudo-clases estructurales

Permiten seleccionar elementos a partir de carácterísticas que, aunque residen en el árbol del documento, no permiten su representación mediante ninguna combinación de selectores. Algunas de estas pseudo-clases necesitan un conjunto especial de argumentos, representado por an+b, que se refiere al "b-ésimo" elemento de cada grupo de "a" elementos hermanos (con el mismo ascendente). La palabra clave odd ("impar" en inglés) puede ponerse en lugar de 2n+1, y lo mismo con even (par) para 2n. Omitir el valor "a" significa que no se establecen grupos de elementos.

• :root (CSS3), el elemento raíz, aquel que engloba a todos los demás (por ejemplo el elemento html de los documentos HTML.
• :nth-child( an+b ) (CSS3), elementos que ocupan el lugar especificado por el argumento, de entre los elementos que compartan su mismo ascendente.
• :nth-last-child( an+b ) (CSS3), elementos que ocupan el lugar especificado por el argumento, de entre los elementos que compartan su mismo ascendente, pero contando en sentido inverso, empezando por el último elemento.
• :nth-of-type( an+b ) (CSS3), elementos que ocupan el lugar especificado por el argumento, de entre los elementos que comparten su mismo ascendente y sean del mismo tipo.
• :nth-last-of-type( an+b ) (CSS3), elementos que ocupan el lugar especificado por el argumento, de entre los elementos que compartan su mismo ascendente y sean del mismo tipo, pero contando en sentido inverso, empezando por el último elemento.
• :first-child, elementos que ocupan el primer lugar de entre todos los elementos que compartan su mismo ascendente; es equivalente a :nth-child(1).
• :last-child (CSS3), elementos que ocupan el último lugar de entre los elementos que compartan su mismo ascendente; es equivalente a :nth-last-child(1).
• :first-of-type (CSS3), elementos que ocupan el primer lugar de entre los elementos que compartan su mismo ascendente y sean del mismo tipo; es equivalente a :nth-of-type(1).
• :last-of-type (CSS3), elementos que ocupan el último lugar de entre los elementos que compartan su mismo ascendente y sean del mismo tipo; es equivalente a :nth-last-of-type(1).
• :only-child (CSS3), elementos que son descendientes únicos.
• :only-of-type (CSS3), elementos que son los únicos de su tipo de entre los elementos que comparten su mismo ascendente.
• :empty (CSS3), elementos que no tienen descendientes.

Pseudo-clase de contenido :contains( ) (CSS3)

Selecciona elementos que contengan el texto especificado entre los paréntesis.

Pseudo-clase de negación :not( ) (CSS3)

Selecciona elementos que NO están representados por el selector que se incluya entre los paréntesis.

Pseudo-elementos

• :first-line, la primera línea del elemento.
• :first-letter, la primera letra del elemento.
• :before y :after, utilizados para insertar contenido antes o después del contenido real del elemento.
• ::selection (CSS3), la parte del elemento que ha sido seleccionada por el usuario.

Las posibilidades que se abren con el uso de pseudo-clases y pseudo-elementos son enormes. Pero, lamentablemente, no parece probable que se dé soporte al tercer nivel en el navegador Internet Explorer a corto plazo. Aun así, siempre es interesante ver algunos ejemplos de pseudo-clases y pseudo-elementos.

Especificidad

Teniendo en cuenta que cuando alguien desarrolla hojas de estilo el origen es inmutable, lo más importante en cuanto al orden de cascada que puede controlarse es la especificidad. He preferido dejar este apartado para el final, pese a su evidente relación con el tema Cascada, porque también requiere conocer los diferentes tipos de selector. Retomemos por tanto el "dilema" que nos ocupaba en dicho apartado. Para saber qué selector es el más específico, el nivel 2 de CSS establece los siguientes criterios:

1. La regla más específica es la que más selectores simples de identificador tiene.
2. Si el criterio 1 ha arrojado un empate, se suman para cada regla el número de selectores de atributo (incluidos los de clase) y el número de pseudo-clases. La regla que arroje la suma más alta gana.
3. Si de los dos criterios anteriores no ha salido una regla vencedora, el último criterio indica que la regla que incluya más selectores simples de tipo sea la más específica.

No debe confundirse un selector compuesto con un agrupamiento de selectores. A efectos de cálculo de especificidad, cada componente de dicho agrupamiento pertenece a reglas diferentes y es totalmente independiente. Las pseudo-clases de negación no deben tenerse en cuenta, contando en ese caso los selectores pasados como argumento.

Dos detalles importantes a tener en cuenta. Como puede observarse, los pseudo-elementos no tienen, en este nivel, influencia en la especificidad. Por otra parte, la información de estilo que puede indicarse en los atributos style de HTML es una regla sin selector, pero se considera que poseen un selector de identificador (aunque el elemento en sí no posea atributo id.

En la primera revisión de esta especificación (CSS 2.1), en proceso de borrador en estos momentos, la regla de un atributo style tiene más especificidad que cualquier otra, y los pseudo-elementos cuentan tanto como los selectores simples de tipo en el criterio 3.

Valoración

CSS no es simplemente una centena anónima de propiedades. Antes y por encima de todas ellas hay un esquema de funcionamiento y aplicación, como ha quedado patente. Y éste, aun a pesar del incompleto soporte que exhiben ciertos navegadores, constituye un abanico de posibilidades a tener en cuenta.

Comentarios

Estás en: tierra de nómadas > tallerWeb > Principios básicos de CSS.