Índice

Los filtros hijos

En este capítulo ya hemos tratado los selectores jerárquicos que permiten seleccionar los hijos. Los filtros hijos ordenan los hijos de un elemento.

1. El primer hijo

$(":first-child")

Selecciona todos los elementos que son el primer hijo de su padre.

$("ul:first-child"): selecciona el primer hijo es decir, el primer elemento de lista <li>, de la lista no ordenada <ul>.

El selector :first-child puede seleccionar varios elementos, uno por cada padre. No hay que confundir esto con :first, que selecciona un único elemento (consulte la sección Los filtros jQuery básicos - El primer elemento, en este capítulo).

Ejemplo

Buscamos el primer enlace dentro de un párrafo.

images/2_5_1_v4.png
<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function() { 
        $("p a:first-child").css("background", "#9cf"); 
    }); 
</script> 
</head> 
<body> 
<p> 
    <a href="#">Enlace 1</a><br /> 
    <a href="#">Enlace 2</a><br /> 
    <a href="#">Enlace 3</a><br /> 
    <a href="#">Enlace 4</a><br ...