Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 59

Las pseudo-clases permiten hacer referencia a elementos HTML por sus características, tales como la posición en el código o las condiciones actuales. CSS3 incorpora nuevas pseudo-clases que permiten una especificidad aún mayor. Aplicaremos algunas a continuación usando un documento simple y estudiaremos el resto más adelante en situaciones más prácticas.

Código 2-18

Documento HTML para probar pseudo-clases.

Vamos a echar un vistazo al nuevo código HTML (Código 2-18): Tiene cuatro elementos <p> anidados en un mismo elemento <div>*. Utilizando pseudo-clases podemos sacar ventaja de esta organización y hacer referencia a un elemento específico sin importar qué información tengamos sobre sus atributos o valores:

Código 2-19

Pseudo-clases :nth-child().

La pseudo-clases se añaden utilizando una coma después de la referencia y antes de su nombre. En la regla del Código 2-19 nos referimos a elementos <p>. Esta regla podría escribirse así: .miclase: nth-child (2) para hacer referencia a cada elemento “hijo” (child) de otro elemento, es decir, anidado en otro elemento, cuyo atributo class tenga un valor igual a miclase. Las pseudo-clases pueden ser añadidas a cualquiera de los tipos de referencias que hemos mencionado hasta ahora.

Hágalo usted mismo

Reemplace el código actual de su archivo HTML por el mostrado en el Código 2-18, incorpore las reglas presentadas en el Código 2-19 al archivo misestilos.css y abra el HTML en el navegador para probar este ejemplo.

La pseudo-clase nth-child () permite ubicar un elemento anidado o hijo específico. Recordará que el documento HTML del Código 2-18 tiene cuatro elementos <p> que son “hermanos”, es decir, que están anidados juntos y, por lo tanto, tienen el mismo “padre” que es el elemento <div>. Lo que esta pseudo-clase indica es algo así como “el elemento hijo en la posición …” por lo que el número entre paréntesis será el número de la posición o índice del elemento. La regla del Código 2-19 hace referencia a cada elemento <p> del documento que ocupe un segundo lugar.

Desde luego, es posible seleccionar cualquier elemento anidado usando el mismo método de referencia pero cambiando el número de índice. Por ejemplo, la siguiente regla tendrá un impacto solo en el último elemento <p>.

Código 2-20

Pseudo-clases :nth-child().

Como usted probablemente se imaginará, es posible asignar estilos a cada elemento mediante la creación de una regla para cada uno de ellos.

Código 2-21

Creación de una lista con la pseudo-clase :nth-child().

En el Código 2-21 se utiliza la pseudo-clase nth-child() para generar una lista de opciones claramente diferenciadas por el color de fondo.

Hágalo usted mismo

Copie el último código en el archivo CSS y abra el documento HTML para comprobar el efecto en su navegador.

Es posible añadir más opciones a la lista mediante la adición de nuevos elementos <p> en el código HTML y nuevas reglas con la pseudo-clase nth-child() y el número de índice correcto. Sin embargo, de este modo se generaría gran cantidad de código y sería imposible de usar en sitios web con generación dinámica de contenido. Una alternativa para obtener el mismo resultado con mayor eficacia sería tomar ventaja de las palabras clave odd y even, disponibles para esta pseudo-clase.

Código 2-22

Sacar provecho de las palabras clave odd y even.

Ahora solo hay dos reglas para toda la lista (no importa cuán larga sea). Aunque se incorporen nuevas opciones o filas a la lista, no será necesario añadir reglas adicionales al archivo. Los estilos se asignarán automáticamente a cada elemento según su posición.

La palabra clave odd para la pseudo-clase nth-child( ) afecta a los elementos <p> que se encuentren anidados en otro elemento y tengan un índice o número de orden impar, y la palabra clave even afecta a aquellos que tienen un número de orden par.

Hay otras importantes pseudo-clases relacionadas con las que estamos estudiando, algunas de ellas de reciente incorporación, como first-child, last-child y only-child.

La pseudo-clase first-child hace referencia solo al primer elemento anidado, last-child hace referencia solo al último y only-child afecta a un elemento solo si es el único anidado en su elemento padre. Estas pseudo-clases en particular no requieren palabras clave o parámetros adicionales y se implementan como en el ejemplo de la página siguiente.

Código 2-23

Usar: last-child para modificar solo el último elemento <p> de la lista.

Otra importante pseudo-clase es la de negación, llamada not().

Código 2-24

Aplicación de estilos a todos los elementos, excepto <p>.

La regla del Código 2-24 asigna un margen de 0 px a cada elemento en el documento excepto los elementos <p>. Los estilos de las reglas creadas con esta pseudo-clase se asignan a cada elemento, pero no a los incluidos entre paréntesis.

En lugar de la palabra clave del elemento, puede utilizar cualquier referencia que desee. En el Código 2-25 cada elemento se verá afectado, excepto aquellos cuyo valor sea mitexto2 en su atributo de clase.

Código 2-25

Excepción utilizando el atributo class.

Al aplicar esta última regla en el documento HTML con el Código 2-18, el navegador asigna los estilos por defecto al elemento <p> identificado por el valor de clase mitexto2 y proporciona un margen de 0 px para el resto ya que el elemento <p> llamado mitexto2 no se ve afectado por la propiedad.