Selectores Condicionales en CSS y XPath
Primero que todo, XPath (XML Path Language) es un lenguaje que permite construir expresiones que recorren y procesan un documento XML. La idea es parecida a las expresiones regulares para seleccionar partes de un texto sin atributos (plain text). XPath permite buscar y seleccionar teniendo en cuenta la estructura jerárquica del XML. XPath fue creado para su uso en el estándar XSLT, en el que se usa para seleccionar y examinar la estructura del documento de entrada de la transformación.[Sacado de wikipedia].
Tanto los selectores para XPath como para aplicarlos con css son muy similares, ya que estos selectores se basan en la seleccion de etiquetas y atributos de HTML/XML.
Esto quiere decir que podremos seleccionar etiquetas especificas incluso con un atributo especifico y asi poder aplicarle un estilo.
Por ejemplo, utilicemos los enlaces. Para nosotros podria ser muy util colocar un estilo a los enlaces de descarga, otro estilo a enlaces que contengan URLs, o que contengan algun tipo de palabra en alguna parte.
Lo primero que debemos aprender son las siguientes notaciones o identificadores:
^ = Se utiliza cuando queremos referirnos a principio de un string.
$ =Se utiliza cuando nos referimos al final de un string.
* =Utilizado para referirnos a cualquier parte de un string.
La estructura general: <etiqueta>[atributo][identificador]=’Valor de atributo’
Comencemos con los enlaces de descarga, o mejor aún con algun tipo de archivo.
Tenemos el siguiente código:
<a href=«documento.pdf»>Enlace Descarga PDF</a>
<a href=«mailto:correo@mail.com»>Enlace de Correo Mailto</a>
<a href=«http://www.iguazoft.com/index.php»>Enlace a una URL</a>
Para referirnos a todos los enlaces que sean un link a una extension cualquiera, en este caso un PDF, nuestra definición CSS quedarÃa de la siguiente manera:
a[href $=’.pdf’]{
color:#F00;
}
Con un enlace que nos lleve a redactar un correo como lo es MAILTO:
a[href ^=’mailto:’]{
background:#FFC;
}
Con una URL que lleve el string iguazoft.com:
a[href *=’iguazoft.com’]{
border:#066 2px dotted;
}
Cabe resaltar que no solo sirve para los enlaces, sirve para parrafos, listas, o cualquier etiqueta que podamos colocarle un atributo. digamos si tuviesemos un parrafo con el atributo title tambien aplicaria de la siguiente manera:
<p title=»Idea Principal»>Contendido de Párrafo</p>
