CSS - Selectores CSS3 de manera facil y potente

Selectores de CSS3

Una de las cosas que se tienen menos en cuenta de las posibilidades que brinda CSS es el uso de selectores, que creció junto a CSS3con la posibilidad se aplicar estilos según el contenido de un atributo de un elemento o según si los elementos son contiguos (están dentro del mismo elemento).

En el primer caso, si tenemos por ejemplo un link que apunta a un archivo de texto (.txt) lo detectaría y aplicaría un determinado estilo.

1. /* URL que empieza con "javascript:" (acción de JS) */
2. a[href^="javascript:"] {color:green;}
4. /* URL que contiene "xitrus.es" (que indica que está dentro de la propia web) */
5. a[href*="xitrus.es"] {color:pink;}
7. /* URL que termina con ".txt" (archivo de texto) */
8. a[href$=".txt"] {color:orange;}

javascript:alert('Hola!')

http://xitrus.es/

http://xitrus.es/humans.txt

Esto nos sería útil para diferenciar si usamos imágenes internas o externas o link que apuntan a otro dominio...
Por poner otro ejemplo, podríamos imaginar que tenemos una serie de bloques con color, que tiene un título con un nombre y un número de color que varía (como "color - #FF0" , "color - #A07" ...) y queremos aplicarles un estilo, podríamos hacer lo siguiente.

1. a[title^="color -"] {color:green;}

Selectores contiguos

Este método para seleccionar elementos nos permite hacer cosas muy curiosas, como seleccionar un elemento adyacente o todos los elementos hermanos.
Puede que explicado no entendáis que tiene de curioso, pero por ejemplo, si pasamos por encima de un elemento (con :hover) podemos hacer que cambie el estilo de un elemento hermano, no solo que esté por debajo como es habitual.

1. div.a:hover ~ div.b {background: #ec098c ;}

div.a

div.b

div.b

1. div.a:hover + div.b {background: #ec098c ;}

div.a

div.b

div.b

Para seleccionar solo el elemento contiguo usamos el símbolo "+" y pasa seleccionar cualquier elemento hermano "~", como podemos ver en el ejemplo y ambos tienen la siguiente estructura.

1. <div>





<div class="a">div.a<div>

<div class="b">div.b<div>

<div> <div>

<div class="b">div.b<div>

2. <div>

VIA Xitrus.es