Uso selectores :first, :last, :not y :has.

Ahora es el momento de ampliar la manera de acceder a los elementos de nuestra página a través del dom. En este caso aprenderemos a utilizar :first, :last,:not y :has



 Para este ejemplo utilizaremos el siguiente código html.
<div>Contenido del Div 1<p>Esto es un parrafo dentro de DIV 1</p></div>
<div>Contenido del Div 2 </div>
<p>Esto es un parrafo</p>
<div>Contenido del Div 3 <p>Esto es un parrafo dentro de DIV 3</p></div>
<p>Esto es otro parrafo</p>
<div>Contenido del Div 4 <span>Esto es un span dentro de DIV 4</span></div>
<div>Contenido del Div 5 </div>

Filtro de selección :first. En este caso seleccionaremos el primer Div de la página y le aplicaremos un background de color rojo
//Código que selecciona el primer div de la página.
$("div:first").css("background-color","red");

Ejemplo:

Contenido del Div 1

Esto es un parrafo dentro de DIV 1

Contenido del Div 2

Esto es un parrafo

Contenido del Div 3

Esto es un parrafo dentro de DIV 3

Esto es otro parrafo

Contenido del Div 4 Esto es un span dentro de DIV 4

Contenido del Div 5

Filtro de selección :last. En este caso seleccionaremos el último Div de la página y le aplicaremos un background de color rojo
//Código que selecciona el ultimo elemento DIV de la página
$("div:last").css("background-color","red");

Ejemplo:

Contenido del Div 1

Esto es un parrafo dentro de DIV 1

Contenido del Div 2

Esto es un parrafo

Contenido del Div 3

Esto es un parrafo dentro de DIV 3

Esto es otro parrafo

Contenido del Div 4 Esto es un span dentro de DIV 4

Contenido del Div 5

Filtro de selección :not. En este caso seleccionamos todos los elementos que no cumplen la condición dentro del selector, en nuestro caso aplicaremos un fondo de color rojo a todos los elementos que no sean DIVS.
//Código que selecciona todos los elementos que no sean div.
$(":not(div)").css("background-color","red");

Ejemplo:

Contenido del Div 1

Esto es un parrafo dentro de DIV 1

Contenido del Div 2

Esto es un parrafo

Contenido del Div 3

Esto es un parrafo dentro de DIV 3

Esto es otro parrafo

Contenido del Div 4 Esto es un span dentro de DIV 4

Contenido del Div 5

Filtro de selección :has. En este caso seleccionamos todos los elementos que cumplen la condición dentro del selector, en nuestro caso aplicaremos un fondo de color rojo a todos los elementos que no sean parrafos pero con la condición que esten dentro de un DIV (que sean hijos de un div).
//Código que selecciona todos los elementos que son p dentro de divs
$("div:has(p)").css("background-color","red");

Ejemplo:

Contenido del Div 1

Esto es un parrafo dentro de DIV 1

Contenido del Div 2

Esto es un parrafo

Contenido del Div 3

Esto es un parrafo dentro de DIV 3

Esto es otro parrafo

Contenido del Div 4 Esto es un span dentro de DIV 4

Contenido del Div 5