Pseudoclases y selectores personalizados
Comprenda pseudoclases integradas como :has(), :not() y :nth-child(), y aprenda a crear sus propios selectores personalizados para filtrar elementos de forma reutilizable.
Pseudoclases y selectores personalizados es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
Descubra el poder de las pseudoclases
¡Le damos la bienvenida a los selectores avanzados! Hoy exploraremos las pseudoclases, palabras clave especiales que se añaden a los selectores para definir un estado particular del elemento seleccionado.
- Permiten seleccionar elementos que no se pueden seleccionar fácilmente mediante atributos o nombres HTML estándar.
- Considérelas filtros dinámicos para sus selecciones.
Comienzan con dos puntos (:), como :hover o :first-child.
Seleccionar por posición: :nth-child()
La pseudoclase :nth-child() selecciona elementos según su posición dentro de un grupo de hermanos. Es increíblemente útil para aplicar estilos a listas o filas de tablas.
:nth-child(n): selecciona el hijo n.:nth-child(odd): selecciona los hijos con números impares.:nth-child(even): selecciona los hijos con números pares.
El conteo comienza en 1 para el primer hijo.
Aplicar estilos con :nth-child(odd/even)
Veamos cómo :nth-child(odd) y :nth-child(even) permiten aplicar rápidamente estilos alternos, como las franjas de una lista.
Ejecute este ejemplo para ver el efecto:
$(document).ready(function() {
// Selects odd list items and makes their text blue
$('li:nth-child(odd)').css('color', 'blue');
// Selects even list items and makes their text green
$('li:nth-child(even)').css('color', 'green');
});
// HTML Structure (imagine this is in your page):
// <ul>
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// <li>Item 4</li>
// </ul>Fórmulas avanzadas de :nth-child()
Puede utilizar fórmulas más complejas dentro de :nth-child(), como An+B. Aquí, A representa el tamaño del ciclo y B es un desplazamiento.
:nth-child(3n): selecciona cada tercer hijo (3.º, 6.º, 9.º...).:nth-child(3n+1): selecciona el 1.º, 4.º, 7.º... hijo.
Esto permite realizar selecciones por intervalos con gran precisión.
Excluir elementos con :not()
La pseudoclase :not() permite excluir elementos específicos de una selección. Es como decir: «seleccione todos los párrafos, excepto los que tengan la clase 'intro'».
- Acepta otro selector como argumento:
:not(selector). - Es muy útil para perfeccionar selecciones existentes sin tener que escribir otras nuevas y complejas.
Uso de :not() en la práctica
Imagine que desea añadir un borde a todos los elementos de una lista, excepto al primero. :not(:first-child) es perfecto para esto.
Vea cómo :not() ayuda a excluir el primer elemento:
$(document).ready(function() {
// Selects all list items that are NOT the first child
$('li:not(:first-child)').css('border-top', '1px solid gray');
});
// HTML Structure:
// <ul>
// <li>First Item</li>
// <li>Second Item</li>
// <li>Third Item</li>
// </ul>Seleccionar elementos padre con :has()
La pseudoclase :has() es única: selecciona un elemento si contiene al menos un elemento que coincide con el selector proporcionado como argumento.
- Es como preguntar: «Deme todos los
<div>que tengan una etiqueta<p>dentro». - Esto permite seleccionar elementos padre según las características de sus elementos hijo.
Resaltar con :has()
Supongamos que desea resaltar únicamente los contenedores <div> que contengan una imagen. :has('img') puede hacerlo de forma eficiente.
Ejecute este código para ver qué div obtiene un borde:
$(document).ready(function() {
// Selects divs that contain an image and adds a border
$('div:has(img)').css('border', '2px solid red');
});
// HTML Structure:
// <div id="container1">
// <p>Text only</p>
// </div>
// <div id="container2">
// <img src="example.png" alt="An image">
// <p>Text and image</p>
// </div>Selectores personalizados: ampliar jQuery
¿Qué ocurre si los selectores integrados de jQuery no son suficientes? ¡Puede crear sus propios selectores de pseudoclase personalizados! Esto le permite filtrar elementos según una lógica personalizada muy específica.
- Se registran mediante
jQuery.expr[':']. - Esto hace que el código de selección sea más limpio y reutilizable.
Es una función avanzada para necesidades de filtrado realmente particulares.
Crear un :contains-word() personalizado
Creemos un selector personalizado llamado :contains-word() que encuentre elementos que contengan una palabra completa específica, no solo una subcadena.
Este ejemplo define :contains-word() y luego lo utiliza:
$(document).ready(function() {
// Define a custom pseudo-selector ':contains-word'
$.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
var pattern = new RegExp('\b' + word + '\b', 'i');
return function(elem) {
return pattern.test($(elem).text());
};
});
// Use the custom selector to find paragraphs containing 'hello'
$('p:contains-word("hello")').css('background-color', 'yellow');
});
// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>Desafío sobre pseudoclases
Considere el siguiente HTML:
<ul>
<li class="special">One</li>
<li>Two</li>
<li class="special">Three</li>
<li>Four</li>
<li class="special">Five</li>
</ul>¿Qué selector de jQuery seleccionaría únicamente 'Two' y 'Four'?
Repaso: pseudoclases y selectores personalizados
¡Ha dominado técnicas potentes de selección con jQuery!
- Las pseudoclases (como
:nth-child(),:not()y:has()) permiten seleccionar elementos según su estado o su relación con otros elementos. :nth-child()selecciona elementos por posición, incluso mediante fórmulas.:not()excluye elementos de una selección.:has()selecciona elementos padre según sus elementos hijo.- Incluso puede crear sus propios selectores de pseudoclase personalizados con
jQuery.expr[':']para realizar filtrados muy específicos.
¡Siga practicando para perfeccionar la selección de elementos del DOM!
Preguntas frecuentes
¿La lección «Pseudoclases y selectores personalizados» es gratis?
Sí — el texto completo de «Pseudoclases y selectores personalizados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Pseudoclases y selectores personalizados»?
Comprenda pseudoclases integradas como :has(), :not() y :nth-child(), y aprenda a crear sus propios selectores personalizados para filtrar elementos de forma reutilizable. Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Pseudoclases y selectores personalizados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Selectores de atributos avanzados
- Pseudoclases y selectores personalizados
- Técnicas eficientes para recorrer el DOM