Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. HTML5 Y CSS3
  3. Los nuevos selectores de CSS3
Extrait - HTML5 Y CSS3 Revolucione el diseño de sus sitios web (4a edición)
Extractos del libro
HTML5 Y CSS3 Revolucione el diseño de sus sitios web (4a edición) Volver a la página de compra del libro

Los nuevos selectores de CSS3

Los selectores CSS 2

1. La declaración del CSS

Como sabe, el CSS permite formatear y diseñar sus sitios web. Puede declarar sus estilos CSS en tres lugares clásicos:

  • En un elemento <style> situado en el elemento <head> de cada página web.

  • En un archivo específico con extensión .css.

  • Directamente en el elemento HTML que se debe formatear, con el atributo style.

HTML5.2 permite ahora situar un elemento <style> en la página, es decir, en el elemento <body>. He aquí un ejemplo totalmente válido:

<body>  
   <p>Vehicula Mollis Fermentum...</p>  
   <style>  
       p {  
           margin: 0;  
       }  
   </style>  
   <p>Malesuada Pellentesque Fermentum Ligula...</p>  
</body> 

2. Los selectores

Debemos recordar que la recomendación CSS 2.1 ya proponía una amplia lista de selectores.

  • Selector universal: permite aplicar un estilo a la totalidad de los elementos HTML de la página. Sintaxis: * {...}.

  • Selector de elemento o de tipo: permite aplicar un estilo a un elemento HTML existente. Sintaxis: p {...}.

  • Selector de clase: permite aplicar un estilo a los elementos que utilicen esa clase. Sintaxis: .intro...

Los nuevos selectores CSS3

Las especificaciones CSS3 introducen nuevos selectores. El módulo de los selectores ya está terminado, así que el W3C ha propuesto una Recomendación con fecha del 29 de septiembre de 2011. Esta es su URL: http://www.w3.org/TR/css3-selectors/

images/new-030.png

El selector general de elementos adyacentes

El CSS2 nos proponía el selector adyacente, que permitía seleccionar el elemento hermano situado a continuación de otro elemento. Ejemplo de la sintaxis: h1+h2 {...}. De este modo, solamente era posible aplicar un estilo específico al primer h2 que siguiera al h1.

Con el CSS3, el elemento adyacente no tiene por qué estar obligatoriamente a continuación del primer elemento. Puede haber otros elementos entre ambos y el estilo se aplicará a los elementos siguientes que se hayan especificado.

Esta es la sintaxis: h1~h2 {...}.

Ejemplo de selector:

h1~h2 {font-style: italic}; 

Ejemplo de código:

<h1>Etiqueta de nivel 1</h1> 
<p>Mi texto principal entre etiquetas p...</p> 
<h2>Etiqueta de nivel 2</h2> 
<h2>Otra etiqueta de nivel 2</h2> 

Y el resultado obtenido:

images/chap07-001.png

Como podemos ver, se ha aplicado la cursiva al texto de los dos elementos <h2> que se encuentran a continuación del <h1>, aunque tengamos un elemento <p> en medio.

El selector de atributo

1. Funcionalidad

Los selectores de atributo existen desde el CSS2. Con CSS3, las posibilidades son aún mayores.

Ejemplos de sintaxis:

  • [atributoˆ="valor"]: para aplicar un estilo a un elemento cuyo atributo comience exactamente por dicho valor.

  • [atributo$="valor"]: para aplicar un estilo a un elemento cuyo atributo termine exactamente por dicho valor.

  • [atributo*="valor"]: para aplicar un estilo a un elemento cuyo atributo contenga al menos una vez ese valor.

2. Los vínculos hacia una dirección de e-mail

Vamos a ver en primer lugar un ejemplo de cómo aplicar un formato específico exclusivo para los vínculos que apunten hacia direcciones de correo electrónico.

Veamos qué estilos se han usado. Queremos seleccionar los vínculos que tengan el atributo mailto para aplicarles un estilo específico: un pequeño icono.

a { 
  text-decoration: none; 
} 
a[hrefˆ="mailto"] { 
background: url(persona.png) left center no-repeat; 
padding-left: 30px; 
} 

Veamos ahora el código HTML de la página. Los dos primeros vínculos tienen el atributo mailto, el tercero no.

<h3>Los interlocutores a su servicio:</h3> 
<p><a href="mailto: jserrano@dominio.com">Javier SERRANO VEGA: 
Director comercial</a></p> 
<p><a href="mailto:...

La pseudo-clase de vínculo

1. Funcionalidad

Para crear vínculos dentro de una misma página, usaremos una sintaxis de este tipo:

<a href="#intro">Ir a la introducción</a> 

Con la nueva pseudo-clase :target, podrá resaltar los vínculos que el visitante ya haya utilizado. 

2. La aplicación

Veamos un ejemplo muy sencillo: usted tiene un documento muy largo, en el cual ha insertado un índice, al comienzo del mismo, con vínculos que apuntan hacia diferentes puntos situados en diversos lugares de la página.

Esta sería la estructura en HTML:

<p><a href="#intro">Introducción</a> | <a 
href="#resultados">Resultados</a> | <a 
href="#conclusion">Conclusión</a></p> 
<h3><a id="intro">Introducción</a></h3> 
<p>Maecenas sed...</p> 
... 
<h3><a id="resultados">Resultados</a></h3> 
<p>Vivamus sagittis lacus...</p> 
... 
<h3><a id="conclusion">Conclusión</a></h3> 
<p>Donec ullamcorper nulla...</p> 
... 

Y estos son los estilos CSS: cuando se use un vínculo del índice, se le aplicará un color de fondo dorado al elemento al que apunte.

a { 
     text-decoration:...

Las pseudo-clases estructurales

1. Funcionalidad

El W3C nos propone toda una serie de pseudo-clases estructurales que nos permiten seleccionar con muchísima precisión los distintos elementos de la estructura de nuestras páginas web.

2. La raíz de la página

La pseudo-clase root permite seleccionar la raíz de la página web, es decir, el elemento <html>. La diferencia con el selector de elemento html es sencilla, en la cascada de estilos :root tiene prioridad.

3. El último elemento hijo

En CSS2 teníamos la pseudo-clase :first-child para seleccionar el primer elemento descendiente de un elemento padre. El CSS3 propone toda una retahíla de pseudo-clases que nos permiten seleccionar con precisión uno u otro elemento hijo.

La pseudo-clase :last-child permite seleccionar el último elemento hijo de un elemento padre. Este sigue el mismo principio de :first-child. Ambas pseudo-clases resultan en la actualidad muy prácticas a la hora de gestionar la fusión de los márgenes de párrafo en una caja <div>.

Esta es la estructura HTML de la página:

<div id="especial"> 
   <p>Molestie suscipit...</p> 
   <p>ut facilisis duis at delenit...</p> 
   <p>Velit quis, dolore...</p> 
   <p>Suscipit, elit adipiscing dolore ea eum...</p> 
</div> 

Veamos el CSS para la caja <div>:

#especial { 
   width: 400px; 
   border: solid 1px black; 
} 

Y el resultado visual obtenido:

images/chap07-011.png

Como podemos ver, el margen superior del primer párrafo y el margen inferior del último párrafo aparecen en la caja <div>.

Para quitar esos márgenes, podemos usar el selector:

#especial p:first-child, #especial p:last-child { 
   margin-top: 0; 
   margin-bottom: 0; 
} 

Esta sería la visualización si usamos esas dos pseudo-clases:

images/chap07-012.png

Los márgenes superior e inferior son ahora de 0.

4. Los elementos descendientes

Para ver cómo se aplica esta pseudo-clase, vamos a tomar como ejemplo una lista <ul>.

Este sería el código HTML de una sencillísima lista:

<ul> 
   <li>Rojo</li> 
   <li>Verde</li> ...