Ir directamente al contenido de esta página

codexexempla.org

Selectores y pseudoselectores de CSS 2.1

Tabla de contenidos

  1. Introducción
  2. Selectores básicos
  3. Selectores avanzados
  4. Pseudoselectores
  5. Agrupar y combinar selectores

Introducción

Como es obvio, para aplicar un estilo a una parte de un documento hay que hacer referencia a ésta. En las regras de una hoja de estilo, esta referencia se recoge en el selector, que son lo elementos, identificadores, clases, o grupos de los anteriores, que aparecen antes de la apertura de llave que engloba las declaraciones. Técnicamente, hay dos tipos de selectores:

Selectores básicos

Hay tres clases de selectores básicos:

Se pueden combinar los selectores básicos para hacerlos un poco más específicos. Por ejemplo, p.intro seleccionaría sólo los párrafos que además tuviesen un atributo class con el valor intro; div#pie sólo seleccionaría aquel elemento cuyo id fuese pie y que fuese un div.

Selectores avanzados

Los selectores avanzados permiten acotar las partes del documento a las que se va a aplicar un estilo. Por ejemplo, hemos visto que aplicando un estilo a p modificaríamos el aspecto de todos los párrafos de una página. ¿Pero que ocurre si queremos modificar exclusivamente el aspecto de los párrafos de la columna derecha de información adicional? Un principiante añade clases y las emplea como selector básico, pero nosotros que queremos llegar a ser «altos programadores» —de nivel 12 o más—, aplicamos los selectores avanzados.

Hay dos tipos de selectores avanzados, los que se basan en relaciones de parentesco entre los nodos del documento, y los que se basan en la selección por medio de atributos.

Antes de pasar al primer tipo, unas notas sobre el árbol del documento.

Aunque se tratará el tema más específicamente en la sección dedicada al modelo de documento de la capa de comportamiento, es necesario aclarar algunos conceptos. Si miramos un código XHTML o HTML, vemos elementos anidados dentro de otros. Todos los elementos que están anidados en el nivel inmediatamente inferior de un elemento son los hijos hijos de tal elemento, el cual a su vez recibe el nombre de padre. Dos elementos que comparten el mismo padre son hermanos. Todos los elementos anidados en un elemento anidado dentro de un primer elemento se consideran descendientes de ese primero. Y, por último, partiendo de un elemento, cada uno de los que lo contiene en algún grado son sus ascendienteso ancestros.

En un ejemplo:


    <?xml version="1.0"?>
    <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <title>Título</title>
    </head>
    <body>
        <div id="contenido">
            <h1>Un encabezado</h1>
            <p>Un párrafo.</p>
            <p>Otro párrafo.</p>
            <p><i>Otro párrafo más, en cursiva.</i></p>
            <p>El párrafo final, <a href="otra_pagina.htm">con un vínculo</a>.</p>
        </div>
        <div id="pie">
            <p>&copy; Copyright</p>
        </div>
    </body>
    </html>
            

Si nos fijamos en el vínculo, es decir, el elemento a, encontramos que su padre es el elemento p en el que está anidado. Es, además, descendiente de div id="contenido", de body, y en última instancia de html.

Ahora al revés. Nos fijamos en el primer div. Vemos que es hijo de body y descendiente de html; también es hermano de div id="pie", y padre del h1; y los p a los que engloba —que por tanto son hermanos entre sí—. Y, por supuesto, es ascendiente de a.

Así, puede seleccionarse un elemento concreto de un documento en base a estas relaciones, según estos métodos:

Por su parte, hay varios métodos para seleccionar un elemento en base a sus atributos:

Hasta aquí, lo que se refiere a los selectores de CSS 2.1. Quien lo desee puede ver la página de ejemplo de selectores aplicados.

Pseudoselectores

Como hemos dicho arriba, los pseudoselectores funcionan como los selectores descritos hasta ahora, pero se aplican a estados o aspectos de un elemento que no pueden ser marcados en el código. Por ejemplo, el estado de :visited de un vínculo no corresponde a un elemento de un XHTML, sino del comportamiento de un usuario frente a un vínculo que se le ha proporcionado. Otro ejemplo es que no se puede marcar por medio de una etiqueta la primera línea de un párrafo, porque la línea como tal se refiere a una circunstancia de contexto: no incluirá las mismas palabras dependiendo de la resolución del monitor, del ancho del elemento que contenga el texto, o del tamaño de letra que haya seleccionado el usuario.

Técnicamente, los pseudoselectores se dividen en pseudoelementos y pseudoclases, y de sus características sólo nos interesan algunas:

Ver la página de ejemplo de pseudoselectores aplicados.

Agrupar y combinar selectores

Para simplificar una hoja de estilo y reducir su tamaño, es buena idea agrupar elementos a los que se asignen las mismas declaraciones. Para ello se incluyen en el mismo selector separados por comas. Por ejemplo:


    #cabecera, p, blockquote, .nota{
        margin:1em 0;
    }        
            

Esta regla aplicaría el margen al elemento identificado con cabecera, a los párrafos y bloques de cita, y a cualquier elemento con la clase nota. Equivaldría a:


    #cabecera{
        margin:1em 0;
    }
    
    p{
        margin:1em 0;
    }
    
    blockquote{
        margin:1em 0;
    }
    
    .nota{
        margin:1em 0;
    }        
            

Por último, quedaría decir que cualquiera de los selectores y pseudoselectores anteriores pueden combinarse para crear reglas específicas:


    #contenido-principal div.noticia-destacada a:hover strong{
        font-weight:normal;
    }
    
    #informacion-adicional ul li:first-child{
        border-left:1px solid #000;
    }
            

Narradas, la primera regla sería: «elimina la negrita de todo strong que aparezca en un vínculo sobre el que el usuario sitúe el puntero del ratón, siempre y cuando el vínculo aparezca en un div con la clase noticia-destacada, y que tal div se encuentre dentro del elemento cuyo id sea contenido-principal». Para la segunda: «aplica el borde al primer ítem de lista no ordenada que aparezca en el elemento identificado como informacion-adicional».

Y con esto, concluye la explicación acerca de los selectores.

Por supuesto, el soporte de los selectores —y sobre todo de los pseudoselectores— no es consistente entre los navegadores. Se pueden emplear los ejemplos que incluyo para comprobar como se comportan los diversos navegadores, aunque si se quiere una tabla-resumen sobre el soporte actualizada con frecuencia recomiendo la de quirksmode.org (inglés). Sólo indicar que en la parte de selectores incluye algunos de CSS 3.

Notas

  1. Yo siempre he pensado que ésta debería ser un pseudoelemento… Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA