Pseudo-clases y pseudo-elementos (3)

Otros selectores que podemos usar y que se combinan con los pesudo-elementos.

El asterisco (*) es llamado un selector universal selector, por ejemplo, si colocamos lo siguiente al inicio de nuestras declaraciones CSS:

* {margin: 0; padding: 0;}

Eliminaremos los márgenes y paddings que colocan los navegadores en las etiquetas.

Cuando una etiqueta está dentro de otra, se dice que la etiqueta contenedora es el elemento padre (parent) y la etiqueta contenida es el elemento hijo (child). Por eso, siguiendo esta analogía, en CSS se habla de la herencia, es decir, ciertas propiedades definidas en el elemento padre, se "transmiten" al hijo. Por ejemplo:

<div style="color: green;">
  <p> ... un texto ...</p>
</div>

En este caso, el DIV es el padre y el párrafo P es el hijo. El párrafo se verá verde porque hemos definido que el DIV tenga color verde y esta propiedad es heredada.

El texto se verá de color verde.

No todas las propiedades se heredan así que también existen pseudo-elementos que nos permiten definir estas cosas con mayor exactitud.

Usando el símbolo < indicamos que cierta propiedad se aplicará sobre los elementos hijo. Por ejemplo si tenemos esto:

div#ejemplo b {color:lightblue;}

<div id="ejemplo">
  <p>El texto se verá de color <b>azul claro</b>.</p>
  Y este otro <b>también</b>.
</div>

Cualquier etiqueta B dentro de ese DIV se verá de color azul:

El texto se verá de color azul claro.

Y este otro también.

En cambio, ya sea usando esto:

div#ejemplo p b {color:lightblue;}

o esto:

div#ejemplo p > b {color:lightblue;}

<div id="ejemplo">
  <p>El texto se verá de color <b>azul claro</b>.</p>
  Pero este otro no <b>aunque esté en negrita</b>.
</div>

Sólo serán azules los que estén dentro de una etiqueta P.

El texto se verá de color azul claro.

Pero este otro no aunque esté en negrita.

El símblo más + lo usamos para indicar a un elemento inmediatamente adyacente:

p.ejemplo + p  {color:yellow;}

<p class="ejemplo">Este es un párrafo cualquiera.</p>
<p>Este es el párrafo adyacente al anterior.</p>
<p>Este no es el párrafo adyacente.</p>

Le estamos diciendo que, el párrafo que inmediatamente sigue a uno al que tiene la clase ejemplo, sea de color amarillo y todos los demás no.

Este es un párrafo cualquiera.

Este es el párrafo adyacente al anterior.

Este no es el párrafo adyacente.

Parece complicado y de alguna manera lo es. Probablemente, más interesante y útil es definir propiedades en función de los atributos de una etiqueta. Por ejemplo, si tuvieramos esto:

a {color:yellow; font-size: 20px;}
a[title] {color:red;}

<p>
  Este enlace no tiene title y es <a href="#">amarillo</a>
  Como este otro enlace tiene title es <a href="#" title="El enlace rojo">rojo</a>
</p>

Lo que veríamos es que todos los enlaces que tengan el atributo title en la etiqueta tendrían un color distinto:

Este enlace no tiene title y es amarillo

Como este otro enlace tiene title es rojo

Esos atributos pueden definirse de manera aún más precisa. En este caso, sólo si el enlace tiene esa dirección URL determinada tendrá el color indicado.

a[href='http://gemablog-.blogspot.com/'] {color:salmon;}

Este es un enlace a ninguna parte

Este es un enlace a Gema Blog

Si en lugar del símbolo igual (=) usamos ~=, los que se mostrarán en ese color son todos aquellos enlaces que estén contenidos en una lista separada por espacios:

a[href='http://gemablog-.blogspot.com/ http://elescaparatederosa.blogspot.com/'] {color:salmon;}

También podríamos establecer más de un atributo, de esta manera, se mostrará de cierto color los enlaces si además, tienen el atributo títle.

a[href='http://gemablog-.blogspot.com/'][title] {color:salmon;}

Combinando esto con content, podrían hacerse cosas interesantes, lástima que no funcione en Internet Explorer, ni siquiera en las versiones nuevas:

a[href='http://gemablog-.blogspot.com/'] {color:salmon;}
a[href='http://gemablog-.blogspot.com/']:after {content: url(unaImagen);}

Este es un enlace a ninguna parte

Este es un enlace a Gema Blog

REFERENCIAS:w3.org