comparte el articulo 

Uso de selectores CSS, Parte 2

Actualizado el 02/09/2011 < > 0 Comentarios

Resumen: Segunda parte del estudio que estamos realizando sobre selectores, en esta ocasión abarcamos pseudoselectores, operadores y expresiones regulares.

Continuemos con la segunda parte del tutorial de selectores CSS, en esta ocasión con una serie de selectores un poco más complejos.

Selectores CSS con operadores

Podemos utilizar operadores entre elementos para refinar nuestra selección. El uso de operadores como el signo más (+), mayor que (>) y virgulilla (~) nos facilitan las cosas al momento de querer obtener elementos adyacentes o descendientes directos.

El operador más nos va a permitir seleccionar los elementos que se encuentran inmediatamente después del primer elemento del selector. Por ejemplo si tuviéramos un selector como este “ul + p”, seleccionaría únicamente el primer párrafo después de cada lista desordenada de nuestro DOM.

Por su parte el operador mayor que actúa de manera similar a un selector descendiente, con la única diferencia de que selecciona los hijos directos del elemento. Por ejemplo si usamos un selector como este “div#contenedor > ul” en una estructura como esta:

<div id="contenedor">
<ul>
	<li>Hijo
<ul>
	<li>Nieto</li>
</ul>
</li>
	<li>Hijo 2</li>
	<li>Hijo 3</li>
</ul>
</div>

Nos regresará únicamente las listas desordenadas que se encuentran directamente como descendientes del contenedor, en cambio si utilizáramos el selector “div#contenedor ul” nos traería también la lista que actúa como nieto.

El uso del operador virgulilla es más discreto, puesto que su función es bastante similar a la del operador +, sólo que es menos estricto, ya que en lugar de seleccionar únicamente al primer elemento que se encuentra después del indicado, selecciona todos los elementos.

Selectores CSS por atributos

Si contamos con elementos en nuestra página que no tienen ningún ID o Clase asignada tendremos que recurrir a buscarlos en base a otros factores, como pueden ser sus atributos.

Para buscar un elemento basándonos en sus atributos basta con utilizar los corchetes después del nombre del elementos, y dentro de ellos especificar el nombre del atributo que deben de contener.

Por ejemplo un selector como este “div[name]” nos regresará todos los elementos de tipo div que cuentan con un nombre.

También podemos buscar por valores de los atributos, si por ejemplo quisiéramos buscar todos los elementos de tipo div que tienen por nombre “divPrueba” haríamos un selector como este “div[name=’divPrueba’]”.

Selectores CSS de atributos con expresiones regulares

Al escuchar expresiones regulares puede que se nos erice más de un pelo, pero no te preocupes no es nada complicado o fuera de este mundo, las expresiones regulares nos han salvado el pellejo más de una vez y esta no es la excepción.

CSS cuenta con una seria de selectores basados en estas expresiones para aplicarse al momento de buscar valores de atributos.

Entre las expresiones más comunes están “*=”, “^=”, “$=” y “~=”, su uso variará dependiendo del filtrado que queramos aplicar.

Si lo que queremos es buscar una palabra en todo el nombre o valor de un atributo basta con usar el asterisco seguido del signo igual, así obtendremos todos los elementos cuyo atributo tenga la cadena en alguna parte de su valor.

Si tenemos un selector como este “a[href*=’oo’]” nos regresará todos los links que nos lleven a páginas que tengan doble o en sus nombres como es el caso de Google o Yahoo si tuviéramos links hacia esas páginas.

Por otra parte si lo que queremos es nada más los elementos cuyos atributos tengan un valor que empiece con una cadena entonces tenemos que utilizar la expresión “^=”. Si queremos traer todos los links hacia servidores “FTP” de nuestro sitio podemos utilizar una expresión como la siguiente “a[href^=’ftp://’]”.

En cambio si quisiéramos aplicar una búsqueda al final del valor utilizaríamos el símbolo $, por lo que un selector como este “a[href$=’.com.mx’]” nos regresará todos los elementos de tipo link que dirigen hacia páginas mexicanas.

Finalmente “~=” es una expresión no tan popular como las anteriores, pero de gran utilidad si el valor del atributo esta separado por espacios. Supongamos que tenemos un atributo con varios valores separados por espacios:

<a href="http://www.lawebera.es">link</a>

Si queremos rastrear dicho elemento basta con utilizar un selector como este “a[info-adicional~=’nueva’]”.

Selectores CSS de pseudoclases

Existen selectores que son identificados por contener dos puntos en su nombre, a estos se les llama comúnmente selectores de pseudoclases y son utilizados para añadir efectos especiales a un selector.

Su sintaxis es bastante sencilla. Simplemente después del nombre del selector agregamos el símbolo de dos puntos “:” seguido del nombre de la pseudoclase “selector:pseudo-clase {propiedad:valor;}”.

Entre los más populares encontramos al selector “:checked” de gran ayuda al momento de manejar formularios, ya que selecciona todos los elementos de tipo casilla o radiobotón que se encuentran seleccionados.

También encontramos a “:before” y “:after”, dos pseudoclases que cada día son más utilizadas, ya que nos sirven para generar contenido alrededor del elemento seleccionado, ampliando nuestras posibilidades de desarrollo de estilos.

Otras más son utilizadas básicamente en links e imágenes, como es el caso de “:visited”, “:link” y “:hover”.

Publicado el 02/09/2011, última actualización 02/09/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño Paginas Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras