Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
12
12

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 CSS3 con 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.

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

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>
  2. <div class="a">div.a</div>
  3. <div class="b">div.b</div>
  4. <div> </div>
  5. <div class="b">div.b</div>
  6. </div>

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: