1.5. Selección de una serie a elementos no estándar de HTML

Si se desea seleccionar los elementos HTML no convencionales, tales como los elementos HTML que pueden contener una determinada pieza de texto, o los elementos en un lugar determinado en una secuencia, o los elementos impares o pares de nuestro archivo HTML.

Para seleccionar los elementos HTML no convencionales, tenemos que utilizar selectores personalizados. Los selectores personalizados nos ayudan a seleccionar grupos de elementos HTML, como elementos HTML que contienen una determinada pieza de texto o que se encuentran en un lugar determinado en el documento (por ejemplo, el tercer párrafo). Selectores personalizados también ayudan en la selección de los elementos impares o pares en un archivo HTML.

He aquí cómo seleccionar todos los elementos que contienen el texto “Life”:

$('span:contains(Life)').addClass('highlight');

En el siguiente ejemplo, vamos a aplicar estilos a los elementos de un div con números pares e impares y el párrafo de un número de secuencia dada del archivo HTML:

$('div:odd').addClass('highlight');

$('div:even').addClass('boundary');

$('p:eq(1)').addClass('linkstyle');

Nuestro primer ejemplo selecciona elementos span que contengan la palabra de “life” y se aplica el punto culminante de clase CSS a ellos. Luego, en nuestro siguiente ejemplo: pares e: incluso son jQuery selectores personalizados que ayudan a la hora de elegir el elemento deseado. La numeración en JavaScript comienza con 0, que es incluso, que 1 es impar, y así sucesivamente. La sentencia del ejemplo aquí selecciona para los elementos div impares (numerados 1,3, ...) y se aplica el punto culminante de clase CSS a ellos:

$('div:odd').addClass('highlight');

Del mismo modo, la siguiente declaración por ejemplo se selecciona los elementos (incluso numerados 0,2, ...) y aplica el límite de la clase CSS a ellos:

$('div:even').addClass('boundary');

Por último, la sentencia del ejemplo aquí utiliza el selector de p: eq para seleccionar el párrafo segundo (debido a que el párrafo primero se numera con 0) y aplica el linkstyle la clase CSS:

$('p:eq(1)').addClass('linkstyle');