Los selectores (ii)

SELECTORES DE ID

Los selectores de ID permiten seleccionar un elemento concreto del documento y sólo uno. Y tiene preferencia sobre cualquier otro estilo. Si por ejemplo, has establecido que todos h1 sean azules, puedes hacer que el h1 que sea el nombre de la página sea rojo con el fondo gris. Para establecer un ID. En la hoja de estilos utilizamos un # (ALT GR+3). En el html ponemos id=”nombre_de_id” Vamos a verlo. Sólo puede haber un ID de cada tipo en un documento, si queremos aplicar un estilo a varios elementos, utilizaremos clases.

Al igual que veíamos con las clases, se lo podemos aplicar a un elemento concreto:

h1#encabezado

A un elemento podemos aplicarle una clase y un ID, esto nos puede servir cuando tenemos varios elementos de una clase determinada y hay uno concreto que queremos diferenciar de alguna manera. Por ejemplo tenemos una serie de elementos que aparecen en una barra lateral y tenemos también una caja de búsqueda que queremos diferenciar de alguna manera. Vamos a crearnos una página con varios DIVs de la clase sidebar y uno que además de la clase sidebar va a tener el id buscar.

ejselector3.html

En este ejemplo vemos que nuestro tercer elemento conserva las características de los elementos de la clase sidebar, pero tiene el fondo azul claro.

ejselector4.html

Podrías haber asignado una clase distinta al último div, pero realmente, si lo miras, la verdad es que ¿te has ahorrado un montón de código no?

SELECCIONAR GRUPOS DE ELEMENTOS

Puede ocurrir que queramos aplicar una misma regla a varios elementos distintos, dentro de un mismo documento. Para ello, los agrupamos, nombrándolos uno detrás de otro, separados por comas:

h1, h2, h3 {
font-family: verdana, arial, sans-serif;
color: green;}

En este caso, todo los elementos h1, h2 y h3 tendrían el mismo tipo de letra y serían de color verde.

Es decir, estos selectores de grupos, no son realmente un selector propiamente dicho; sino un método abreviado de asignar las mismas propiedades a varios tipos de elementos a la vez.

No es necesario que se trate de elementos homogéneos, podemos agrupar los elementos que queramos,

em, strong {
background-color: #e5e5e5;}

Incluso podemos agrupar un elemento normal y uno al que hayamos aplicado una clase:

h3, p.especial {
background-color: red;
color. White;}

Los elementos h3 y los párrafos de la clase especial, serían blancos con el fondo rojo.

SELECTORES DE ELEMENTOS ADYACENTES

En este caso lo que seleccionamos es un elemento que se encuentre situado inmediatamente detrás de otro en un documento HTML. No se trata de qué esté dentro, ni tiene nada que ver con la herencia. Son elementos completamente independientes entre sí, podríamos decir que ”son hermanos” y además están juntos, si no están juntos no funciona.

Por ejemplo:

<h1>Un gran titular</h1>
<h2>Un titular importante</h2>
<h2>otro  titular importante</h2>

El primer encabezado h2 que hemos puesto en la página es adyacente al titular h1, en cambio el segundo h2 no lo es porque hay otro elemento en medio. Y ninguno de los dos son ”hijos” del h1, así que no heredan sus propiedades.

Para especificar un selector adyacente, utilizamos el símbolo más:

h1 + h2 {
background-color: red;
color: white;}

Si vemos esta regla en acción veríamos que el primer h2 sería blanco sobre rojo. Si en lugar del código que hemos visto antes, insertáramos un párrafo después del h1,

<h1>Un gran titular</h1>
<p>Esto es un párrafo precioso</p>
<h2>Un titular importante</h2>
<h2>otro  titular importante</h2>

nuestra regla ya no funcionaría porque en este caso el h1 no es inmediatamente posterior al h1.

SELECTORES DE DESCENDIENTES

En el primer tema, en el punto sobre la jerarquía familiar, veíamos que cualquier elemento de un documento HHTML desciende de al menos 1 elemento.

Si estás familiarizado con los estándares html y xhtml, ya te habrás dado cuenta de lo útil que resulta visualizar los documentos html como una serie de contenedores.

Image

Si nos fijamos en la figura, vemos que:

El elemento <body> es el padre tanto del elemento <h1> cómo del elemento <p>

Los elementos <h1> y <p> son hijos del elemento body.

Los elementos <h1> <p> , <img> y <a> son todos descendientes del elemento <body>

Cómo su nombre indica, un selector de descendientes, selecciona un elemento exclusivamente cuando es un descendiente de otro elemento que hemos especificado.

Utilizando este tipo de selectores, nos aseguramos de que la regla se aplica sólo a elementos que desciendan de un determinado elemento. En este caso, ponemos el elemento padre y después el elemento hijo, separado por espacio.

li em {
font-size: large}

En este caso, todos elementos <em> que estén dentro de un li, tendrían un tipo de letra grande. En este caso no es necesario que estén seguidos.

<ul>
<li> un elemento</li>
<li><strong>Nota: </strong> <em>Malevaje</em> es un grupo madrileño de tangos.</li>
</ul>

<p><em>Tango:</em> Sensual  música argentina.</p>

Si vemos el ejemplo, el primer em tiene un tipo de letra enorme, en cambio el segundo no la tiene porqué ese em no desciende de un li, si no de un p.

Cómo en casos anteriores podemos hacer combinaciones, por ejemplo elementos que sean descendientes de elementos de determinada clase.

li.especial p {
color: black}

Hay que tener presente que no hace falta que el descendiente sea un hijo del elemento padre, puede ser un nieto o un bisnieto o lo que fuere siempre que sea descendiente.

Supongamos que queremos que todas los elementos <strong> aparezcan en negrita. Para lograrlo, podemos utilizar un selector simple:

Strong {propiedad: negrita}

Pero supongamos que queremos utilizar también <strong> dentro de algún titular, y los titulares ya están en negrita. En este caso necesitaríamos que cuando la etiqueta <strong> esté dentro de un encabezado tenga una apariencia visualmente distinta. Esto es precisamente lo que podemos conseguir con los selectores de descendientes.

Sintaxis

Un selector de descendientes es simplemente una lista de selectores, separados por un espacio. Hay que pensar en la jerarquía de elementos que hemos visto de fuera hacia dentro. Por ejemplo para seleccionar aquellas etiquetas strong que están situadas dentro de un encabezado h1 lo haríamos así:

H1 strong {propiedades}

Y si nuestro código fuera éste

<h1> los métodos de <strong> selección</strong></h1>

Se aplicarían al elemento strong las propiedades que acabamos de definir.

SELECCIONAR ELEMENTOS HIJOS

En este caso seleccionamos elementos que sean hijos de un elemento, pero los nietos, bisnietos… no se verían afectados. Es un selector de descendientes restringido por decirlo de alguna manera. Esta vez ponemos el elemento padre seguido del símbolo > y el elemento hijo.

li > em {
font-size large;}

En este código

<ul>
<li>Artículo <em>primero</em></li>
<li><p>Artículo <em>Segundo</em></li>
</ul>

El primer em, se vería con una letra grande porque el elemento em es hijo del elemento li, en cambio en el segundo caso, la norma no se aplicaría porque el elemento em es nieto del li.

Al día de hoy, Internet Explorer (incluida la versión 6) no soporta este tipo de selectores, por lo que es mejor utilizar con cuidado los selectores de descendientes y dejar éstos para cuando Internet Explorer se avenga a razones si es que alguna vez decide hacerlo.

PSEUDO SELECTORES

Este tipo de selectores nos permiten seleccionar y modificar la apariencia de un enlace o grupo de enlaces, en sus distintos estados.

Eso de los estados significa que los enlaces pueden estar:

I. En estado normal: Es el estado habitual de cualquier enlace que todavía no ha sido visitado.
II. En estado visitado: Una vez que hemos pulsado ese enlace.
III. Hover: Es el momento en el que pasamos el ratón por encima.
IV. Activos: Es el momento exacto en que pulsamos sobre un enlace.

Ya habrás visto en muchas páginas que los enlaces aparecen azules si no los has visitado aún y luego aparecen morados si ya los has visitado. Ese es el comportamiento normal de un enlace. Pero con CSS puedes modificar este comportamiento.

Hay que tener en cuenta que algunos de estos estados son mutuamente excluyentes entre sí. Por ejemplo, un enlace no puede haber sido visitado y no visitado simultáneamente; pero otros no, un artículo puede estar activo y a la vez haber sido ya visitado o no.

Utilizando CSS puedes asignar una apariencia distinta a cada uno de los 4 estados para que tus usuarios siempre sepan dónde se andan.

Image
Por ejemplo, que antes de ser visitados aparezcan en rojo, una vez visitados en marrón, cuando les pasas el ratón por encima aparecen con un fondo distinto, etc.

Sintaxis

El selector para enlaces normales es a: link {propiedades}
El selector para enlaces visitados es: a: visited {propiedades}
El selector para enlaces mientras estamos pasando el ratón por encima es: a: hoover {propiedades}
El selector para enlaces activos (estamos pulsando sobre ellos) es: a: active {propiedades}

Con los selectores de enlaces, la especificidad (que veremos en detalle más adelante), nos puede crear problemas en nuestros primeros intentos.

La especificidad son los principios por los que se rigen las hojas de estilo cuando se selecciona un elemento varias veces, asignándole propiedades contradictorias: qué es lo que ocurre en caso de conflicto entre los estilos asignados.

En el caso concreto de los pseudo selectores de enlaces, no son elementos que sean más específicos que otros, y tampoco es más específico un pseudo selector que cualquiera de los otros tres. Por lo que tendremos que tener en cuenta esto, a la hora de establecer los estilos para los diferentes estados de nuestros pseudo selectores de enlaces.

Cómo ya hemos dicho, hay pseudo selectores que no son excluyentes entre sí, con lo que nos podemos encontrar con qué en un momento determinado las propiedades de dos pseudo selectores sean aplicables a un mismo enlace, por ejemplo el pseudo selector de enlace ya visitado y el pseudo selector de “hover”. ¿Qué ocurre en este caso de conflicto entre dos reglas igualmente aplicables a un mismo elemento?

Cuando los selectores en posible conflicto tienen todos la misma especificidad, prevalece el último que se haya especificado, es decir el que está más abajo en la hoja de estilos.

Es decir, para que funcionen correctamente estos pseudo selectores y no te encuentres con conflictos, debes especificarlos exactamente en el orden en el que los hemos explicado.

Si además de los pseudo selectores, quieres poner un selector de etiqueta de enlaces, deberá ir antes que los demás:

A {propiedades}
A:link {propiedades}
A:visited {propiedades}
A:hover {propiedades}
A:active {propiedades}

Utilización

Con estos selectores puedes conseguir que tus enlaces tengan una apariencia distinta en cada uno de los estados. Puedes aplicar a estos pseudo selectores las mismas propiedades que le puedes aplicar a cualquier otro elemento: cambiar el color de fondo, la fuente, la alineación, el tamaño de la letra… etc.

Además, puedes utilizar este tipo de pseudo selectores junto con selectores de clase; así podrías crear grupos de enlaces que se comporten de forma distinta dependiendo de tipo de enlaces que sean (enlaces en un menú, enlaces en un texto, enlaces a página dentro de sitio o enlaces a sitios fuera de tu web, podrían estar perfectamente diferenciados).

Por ejemplo, supongamos que tenemos 3 tipos de enlaces que queremos diferenciar:

Palabras que están enlazadas a un glosario dentro de nuestra web.
Enlaces que apuntas a otros artículos o secciones de nuestra web
Enlaces que apuntan a otras webs.

Utilizando clases podríamos elegir una apariencia distinta para cada uno de los tres tipos de enlaces

A.glosario:link {propiedades}
A.glosario:visited {propiedades}
A.glosario:hover {propiedades}
A.glosario:active {propiedades}

A.web:link {propiedades}
A.web:visited {propiedades}
A.web:hover {propiedades}
A.web:active {propiedades}

A.otraweb:link {propiedades}
A.otraweb:visited {propiedades}
A.otraweb:hover {propiedades}
A.otraweb:active {propiedades}

El conseguir que tanto estilo distinto quede bien y armonioso ya depende del sentido y habilidad “artística” de cada uno.

Volver al índice

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s