La guida definitiva alle pseudo-classi CSS
Se sei un principiante o uno sviluppatore CSS esperto, probabilmente ne hai sentito parlare pseudo-classi. La pseudo-classe più conosciuta è probabilmente : hover, che ci consente di modellare un elemento quando è nello stato hover, cioè quando un dispositivo puntatore, come un mouse, è puntato verso di esso.
Seguendo il concetto dei nostri post precedenti sul margine: auto e CSS Floats, diamo un'occhiata più approfondita alle pseudo-classi in questo post. Vedremo cosa sono veramente le pseudo-classi, come funzionano, come possiamo classificarli e come sono diversi dagli pseudo-elementi.
Cosa sono le pseudo-classi?
Una pseudo-classe è una parola chiave che possiamo aggiungere ai selettori CSS per definire uno stato speciale dell'elemento HTML appartenente. Possiamo aggiungere una pseudo-classe a un selettore CSS usando il sintassi del colon : come questo: a: hover ...
Una classe CSS è un attributo che possiamo aggiungere agli elementi HTML per cui vogliamo applicare le stesse regole di stile, come voci di menu in alto o titoli di widget della barra laterale. In altre parole, possiamo usare le classi CSS per raggruppa o classifica elementi HTML che sono simili in un modo o nell'altro.
Le pseudo-classi sono simili a loro nel senso che lo sono anche loro usato per aggiungere regole di stile agli elementi che condividono la stessa caratteristica.
Ma mentre le classi genuine sono definito dall'utente e può essere individuato nel codice sorgente, per esempio Il lavoro di regolari classi CSS è a classificare o raggruppare elementi. Gli sviluppatori sanno come devono essere raggruppati i loro elementi: possono formare classi come "voci di menu", "pulsanti", "miniature", ecc. Per raggruppare e in seguito definire elementi simili. Queste classificazioni si basano sulle caratteristiche degli elementi che sono dato dagli sviluppatori stessi. Ad esempio, se uno sviluppatore decide di utilizzare a Tuttavia, gli elementi HTML hanno le loro caratteristiche comuni in base al loro stato, posizione, natura e interazione con la pagina e l'utente. Queste sono le caratteristiche che sono non tipicamente contrassegnato nel codice HTML, ma possiamo bersagliateli con le pseudo-classi in CSS, ad esempio: Questi sono il tipo di caratteristiche che sono generalmente prese di mira dalle pseudo classi. Per capire meglio la differenza tra classi e pseudo-classi, supponiamo che stiamo usando la classe Possiamo modellare questi ultimi elementi figlio con il seguente CSS: Ma cosa succede quando l'ultimo elemento cambia? Bene, dovremo spostare il Questo fastidio di l'aggiornamento delle classi può essere lasciato allo user agent, almeno per quelle caratteristiche che sono comuni tra gli elementi (e l'essere un ultimo elemento è il più comune possibile). avere un predefinito Esistono molti tipi di pseudo-classi, ognuna delle quali ci fornisce modi per scegliere gli elementi in base alle loro caratteristiche altrimenti inaccessibili o più difficili da accedere. Ecco un elenco di pseudo classi standard in MDN. Le pseudo-classi dinamiche vengono aggiunte e rimosse dagli elementi HTML dinamicamente, in base allo stato in cui si trasformano in risposta alle interazioni dell'utente. Alcuni degli esempi di pseudo-classi dinamiche sono Le pseudo-classi basate sullo stato vengono aggiunte agli elementi quando sono in un particolare stato statico. Alcuni dei suoi esempi più noti sono: La pseudo-classe basata sullo stato più popolare deve essere Le pseudo-classi strutturali classificano gli elementi in base sulla loro posizione nella struttura del documento. I suoi esempi più comuni sono Ci sono anche varie pseudo-classi che sono difficili da classificare, come ad esempio: Una delle cose più difficili delle pseudo-classi è probabilmente capire la differenza tra il Entrambe sono pseudo-classi strutturali e mark un elemento specifico all'interno di un elemento genitore (contenitore), ma in un modo diverso. Assumere n è 2, quindi Diamo un'occhiata a un esempio. Vediamo come questo breve stile CSS usa l'HTML in due casi diversi. Nel caso 1, il secondo elemento all'interno di a Ma se l'elemento genitore fa avere un secondo paragrafo, il Nel nostro esempio, il Paragrafo 1, Bambino 1 Paragrafo 2, Bambino 3 Nel secondo caso, spostiamo la lista non ordinata al terzo posto, e il secondo paragrafo verrà prima di esso. Ciò significa che entrambi i Paragrafo 1, Bambino 1 Paragrafo 2, Bambino 2 Se vuoi leggere di più sulle differenze tra il Quando parliamo di pseudo-classi, è anche importante capire in che modo si differenziano dagli pseudo-elementi, per non mescolarli. Ma mentre usiamo le pseudo-classi per selezionare gli elementi HTML esistono nell'albero del documento solo non contrassegnati separatamente, gli pseudo-elementi ci permettono di individuare elementi che normalmente non esistono nel DOM, o affatto (es C'è anche a differenza di sintassi. Gli pseudo-elementi sono generalmente identificati con i doppi punti Questo può portare a un caso di confusione come nei CSS2, anche gli pseudo-elementi sono contrassegnati con un singolo colon: i browser accettano ancora la sintassi dei due punti per gli pseudo-elementi. Ci sono anche differenze tra pseudo-classi e pseudo-elementi in il modo in cui possiamo indirizzarli con i CSS. Gli pseudo-elementi possono apparire solo dopo la sequenza dei selettori, mentre le pseudo-classi possono essere posizionate ovunque nella sequenza del selettore CSS. Ad esempio, puoi scegliere come target l'ultimo elemento della lista di un elemento della lista O La prima sequenza del selettore seleziona l'ultimo bambino all'interno del Proviamo a fare qualcosa di simile con gli pseudo-elementi. Il codice CSS sopra è valido e apparirà il testo "rosso" dopo il D'altro canto, questo codice non funzionerà, come noi non può cambiare la posizione di uno pseudo-elemento all'interno della sequenza del selettore. Inoltre, solo uno pseudo-elemento può apparire accanto a un selettore, mentre le pseudo-classi possono essere combinati tra loro se la combinazione ha un senso. Ad esempio, per indirizzare i primi elementi figlio che sono anche di sola lettura, possiamo creare una combinazione delle pseudo-classi Un codice di selezione con a È importante saperlo questi sono non Pseudo-classi CSS che sono presi di mira da jQuery. Sono chiamate estensioni selettore jQuery. Le estensioni del selettore jQuery ti permettono indirizzare gli elementi HTML con parole chiave più semplici. Molti di questi sono combinazioni di più normali selettori CSS, che sono rappresentati con una singola parola chiave.Scopo delle Pseudo-Classi
.scorso per identificare gli ultimi elementi in diversi contenitori genitori.
li.last text-transform: maiuscolo; option.last font-style: italic;
.scorso classe dal precedente ultimo elemento a quello attuale.:ultimo bambino pseudo-classe è davvero molto utile In questo modo, noi non è necessario indicare l'ultimo elemento nel codice HTML, ma possiamo ancora modificarli con il seguente CSS: li: last-child text-transform: uppercase; opzione: last-child font-style: italic;
Principali tipi di pseudo-classi
1. Pseudo-classi dinamiche
: hover, :messa a fuoco, : Link, e : visited, Tutto ciò che può essere aggiunto al tag di ancoraggio. a: visited color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Pseudo-classi basate sullo stato
: selezionata che può essere applicato per le checkbox ():a schermo intero per indirizzare qualsiasi elemento che viene attualmente visualizzato in modalità a schermo intero:Disabilitato per elementi HTML che possono essere in modalità disabilitata, come , , e . : selezionata, che indica se una casella di controllo è selezionata o meno. .checkbox: checked + label stile font: corsivo; input: disabilitato background-color: #EEEEEE;
3. Pseudo-classi strutturali
:Primogenito, :ultimo bambino, e : Nth-child (n) - tutto può essere usato per indirizzare un elemento figlio specifico all'interno di un contenitore in base alla sua posizione - e :radice che si rivolge all'elemento padre di livello più alto nel DOM. 4. Varie pseudo-classi
: Non (x) che seleziona elementi che non corrispondono al selettore x: Lang (lingua-code) che seleziona elementi di cui il contenuto è in una lingua specifica: Dir (direzionalità) che seleziona elementi con il contenuto di una determinata direzionalità (da sinistra a destra o da destra a sinistra). p: lang (ko) background-color: # FFFF00; : root background-color: # FAEBD7;
nth-child vs ennesimo di tipo Pseudo-classi
: Nth-child e : Nth-of-type pseudo-classi.: Nth-di-child (n) bersaglia un elemento che è il secondo figlio del suo elemento genitore, e : Nth-of-type (n) obiettivi il secondo tra i stesso tipo di elemento (come i paragrafi) all'interno di un elemento genitore. / * un paragrafo che è anche il secondo figlio all'interno dell'elemento padre * / p: nth-child (2) color: # 1E90FF; // lightblue / * il secondo paragrafo all'interno di un elemento genitore * / p: nth-of-type (2) font-weight: bold;
Caso 1
nth-child (2) la regola non si applica ad essa. Anche se è un secondo figlio, lo è non un paragrafo. nth-of-type (2) si applicherà la regola, in quanto questa regola cerca solo il elementi, e non si preoccupa degli altri tipi di elementi (come liste non ordinate) all'interno dell'elemento genitore.nth-of-type (2) regola interpreterà il secondo paragrafo che è Child 3.
Elenco non ordinato 1, bambino 2
Caso 2
: Nth-child (2) e il : Nth-of-type (2) le regole saranno applicate, in quanto il secondo paragrafo è anche il secondo figlio del genitore
Elenco non ordinato 1, bambino 3
: Nth-of-bambino e : Nth-of-type pseudo-classi, CSS Tricks ha un ottimo post su di esso. Se usi SASS, Family.scss può aiutarti a creare complicazioni nth-child'elementi ified.Pseudo-Classi vs Pseudo-Elementi
Pseudo-elementi, ad esempio ::prima e ::dopo (vedi questo tutorial su come usarli) sono anche aggiunto dagli interpreti, e possono essere presi di mira e abbinati a CSS pure, proprio come le pseudo-classi. ::prima e ::dopo) o solo come alcune parti di elementi esistenti (ad es ::prima lettera o :: segnaposto). ::, mentre le pseudo-classi sono identificate con un singolo colon :.1. La loro posizione nella sequenza selettore CSS
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.rosso) e il secondo seleziona l'ultimo figlio tra gli elementi che possiedono il .rosso classe dentro ul> .red :: after display: block; contenuto: 'rosso'; colore: # B0171F;
oggetti con la classe .rosso. ul> :: after.red display: block; contenuto: 'rosso'; colore: # B0171F;
2. Numero di occorrenze in una sequenza di selezione
:Primogenito e :sola lettura nel seguente modo: : first-child: sola lettura color: #EEEEEE;
jQuery Selector Extensions
: la sintassi non costituisce sempre una pseudo-classe CSS corretta. Se hai mai usato jQuery, potresti aver usato molti dei suoi selettori con : sintassi, per esempio $ ( ': Casella di controllo'), $ ( ': Input') e $ ( ': Selezionate'). / * Cambia il carattere di tutti gli elementi HTML di input, come pulsante, seleziona e inserisci * / $ (": input") .css ("font-family", "courier new")
