Pseudo-classi e selettori personalizzati
Comprendere le pseudo-classi integrate come :has(), :not() e :nth-child(), quindi imparare a creare selettori personalizzati per filtrare gli elementi in modo riutilizzabile.
Pseudo-classi e selettori personalizzati è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
Sblocchi la potenza delle pseudo-classi
Benvenuto nei selettori avanzati! Oggi esploreremo le pseudo-classi, parole chiave speciali aggiunte ai selettori per definire uno stato particolare dell'elemento selezionato.
- Consentono di individuare elementi che non è facile selezionare utilizzando i normali attributi o nomi HTML.
- Le si può considerare come filtri dinamici per le selezioni.
Iniziano con i due punti (:), come :hover o :first-child.
Selezionare in base alla posizione: :nth-child()
La pseudo-classe :nth-child() seleziona gli elementi in base alla loro posizione all'interno di un gruppo di elementi fratelli. È incredibilmente utile per applicare stili a elenchi o righe di tabelle.
:nth-child(n): seleziona l'ennesimo elemento figlio.:nth-child(odd): seleziona gli elementi figli in posizione dispari.:nth-child(even): seleziona gli elementi figli in posizione pari.
Il conteggio inizia da 1 per il primo elemento figlio.
Applicare stili con :nth-child(odd/even)
Vediamo come :nth-child(odd) e :nth-child(even) possano applicare rapidamente stili alternati, come le strisce di una zebra in un elenco.
Provi a eseguire questo esempio per vederne l'effetto:
$(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>Formule avanzate di :nth-child()
È possibile usare formule più complesse all'interno di :nth-child(), come An+B. In questo caso, A rappresenta la dimensione del ciclo, mentre B è l'offset.
:nth-child(3n): seleziona un elemento figlio ogni 3 (3°, 6°, 9°...).:nth-child(3n+1): seleziona il 1°, il 4°, il 7° elemento figlio...
In questo modo è possibile effettuare selezioni a intervalli con grande precisione.
Escludere elementi con :not()
La pseudo-classe :not() consente di escludere elementi specifici da una selezione. È come dire: "seleziona tutti i paragrafi, tranne quelli con la classe 'intro'".
- Accetta un altro selettore come argomento:
:not(selector). - È uno strumento potente per perfezionare selezioni esistenti senza doverne scrivere di nuove e complesse.
Usare :not() nella pratica
Immagini di voler aggiungere un bordo a tutti gli elementi di un elenco tranne il primo. :not(:first-child) è perfetto per questo scopo.
Osservi come :not() consenta di escludere il primo 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>Selezionare gli elementi genitori con :has()
La pseudo-classe :has() è particolare: seleziona un elemento se contiene almeno un elemento che corrisponde al selettore passato come argomento.
- È come chiedere: "Dammi tutti i
<div>che contengono al loro interno un tag<p>." - Consente di selezionare gli elementi genitori in base alle caratteristiche dei loro elementi figli.
Evidenziare con :has()
Supponiamo di voler evidenziare solo i contenitori <div> che contengono un'immagine. :has('img') consente di farlo in modo efficiente.
Esegua questo codice per vedere quale div riceve un bordo:
$(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>Selettori personalizzati: estendere jQuery
E se i selettori integrati di jQuery non fossero sufficienti? È possibile creare i propri pseudo-selettori personalizzati! In questo modo si possono filtrare gli elementi in base a una logica personalizzata e altamente specifica.
- Si registrano usando
jQuery.expr[':']. - Questo rende il codice di selezione più pulito e riutilizzabile.
È una funzionalità avanzata, pensata per esigenze di filtraggio davvero particolari.
Creare un :contains-word() personalizzato
Creiamo un selettore personalizzato chiamato :contains-word() che individua gli elementi contenenti una parola intera specifica, non solo una sottostringa.
Questo esempio definisce :contains-word() e poi lo utilizza:
$(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>Sfida sulle pseudo-classi
Consideri il seguente codice HTML:
<ul>
<li class="special">One</li>
<li>Two</li>
<li class="special">Three</li>
<li>Four</li>
<li class="special">Five</li>
</ul>Quale selettore jQuery selezionerebbe solo 'Two' e 'Four'?
Riepilogo: pseudo-classi e selettori personalizzati
Ha acquisito padronanza di potenti tecniche di selezione di jQuery!
- Le pseudo-classi (come
:nth-child(),:not(),:has()) consentono di selezionare gli elementi in base al loro stato o alla loro relazione con altri elementi. :nth-child()seleziona gli elementi in base alla posizione, anche usando formule.:not()esclude gli elementi da una selezione.:has()seleziona gli elementi genitori in base ai loro elementi figli.- È persino possibile creare i propri pseudo-selettori personalizzati con
jQuery.expr[':']per effettuare filtraggi altamente specifici.
Continui a esercitarsi con queste tecniche per perfezionare la selezione degli elementi nel DOM!
Domande Frequenti
La lezione «Pseudo-classi e selettori personalizzati» è gratuita?
Sì — il testo completo di «Pseudo-classi e selettori personalizzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «Pseudo-classi e selettori personalizzati»?
Comprendere le pseudo-classi integrate come :has(), :not() e :nth-child(), quindi imparare a creare selettori personalizzati per filtrare gli elementi in modo riutilizzabile. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.
Quanto tempo richiede la lezione «Pseudo-classi e selettori personalizzati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Selettori avanzati per attributi
- Pseudo-classi e selettori personalizzati
- Tecniche efficienti di attraversamento del DOM