tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.

phtml

tierra de nómadas - tallerWeb

Principios básicos de CSS
Saltar índice de contenido - Desplazarse al índice de navegación.

Contenido: Lo básico. Reglas. Medios. Cascada. Herencia. Cómputo. Selectores. Pseudo-clases y

pseudo-elementos. Especificidad. Valoración. Comentarios.

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:

1 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

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.

2 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

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.

3 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

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%; }

Valor especificado Valor computado Valor real

85% 520.2px 520px
El ancho del bloque de contención es de 612px: 612*85/100=520,2.
La aplicación no puede representar fracciones de píxel, de manera que redondea el valor.

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

4 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

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

5 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

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:

6 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

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.

7 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

: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

8 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

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

Mil Gracias

Publicado por Mauricio, 18/04/06, 08:13

Por una breve pasada en busqueda de algo que me ayudara, este manual me ha salvado. Por lo poco que vi
y por la ayuda que me dio para solucionar el problema voy a decirte que te pasaste. MIL
GRACIASSS!!!!!!

necesito ayuda

Publicado por hola yo, 29/09/06, 07:15

si tengo un css donde estan todos los atributos de la pagina web, como es una tabla, y quiero que una tabla
me quede diferente a las anteriores como hago?
lo necsito de urgencia
me parecio muy interesante el tutorial

9 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

Importacion de Fonts,

Publicado por Matuxtreme, 02/11/06, 12:06

Muy buena info, estaría mejor aun si pones algo al respecto de como importar una font con algunos
ejemplos y poner una tabla de compatibilidades entre los browsers....por ejemplo todo lo que sea CSS 3 no
funciona en IE 5.5+, etc.

Un saludo!

xzfigcvajn

Publicado por xzfigcvajn, 10/03/07, 07:00

Hi! Very nice site! Thanks you very much! uutzeddrpurxfy

hoja de calculo

Publicado por johanbliss, 11/04/07, 01:22

hola yo nesecito para ya que pongan el funcionamiento de una hoja de calculo y lo ponen en la pagina del
funcionamiento y hablan de otra verga que les pasa vusquen su pagina de lo que ustedes hablan........

byyyyyeeee loles

Así da gusto

Publicado por jcc, 12/08/07, 03:38

Sí señor, esto es una guía en condiciones. Es completa, clara, está bien estructurada y muy bien explicado
todo.
Muchas gracias!

Letal

Publicado por letal, 14/11/07, 05:32

El doc esta letal

Muy bueno, pero como puedo darle más espacio a un checkbox

Publicado por Sigmo, 15/11/07, 11:39

Me explico, entre la casilla del checkbox y el texto, ¿¿¿¿como puedo introducir más espacio???? Me estoy
volviendo loco...

Gracias por todo.

Publicado por , 24/12/07, 01:15

F7uNGu <a href="http://hpabmogiouum.com/">hpabmogiouum</a>,

[url=http://roozuwprcmyj.com/]roozuwprcmyj[/url], [link=http://fzwcqjhiddlx.com/]fzwcqjhiddlx[/link],
http://ouenteaukfxz.com/

10 de 11 11/03/2008 22:35
tierra de nómadas - Principios básicos de CSS http://www.tierradenomadas.com/tw007.phtml

Buenísimo

Publicado por buenísimo, 07/02/08, 07:50

Muy bueno. Hace tiempo que estaba buscando un manual de CSS en condiciones y por fin lo he
encontrado. Gracias.

Ver comentarios anteriores...

Agregar comentario...

Sugerir taller:
Enviar Sugerir cualquier cosa, contactar, etc...
Buscar en el sitio:
Buscar Avanzada...

31/03/2003. sysifus. Taller nº 7.

· tierra de nómadas · tallerWeb · debates · recortes · diccionario ·

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

11 de 11 11/03/2008 22:35