Selectores Condicionales en CSS y XPath

selectores condicionales

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>

 

El estilo quedaría de la siguiente forma:

You may also like...