Qual è la differenza tra una pseudo-classe e uno pseudo-elemento nei CSS?


94

Cose come a:linko div::after...

Le informazioni sulla differenza sembrano scarse.


1
@ ŠimeVidas a quale post? collegamento?
tybro0103

1
Penso che le specifiche siano abbastanza chiare ...
zzzzBov

1
@ tybro0103 Non ne ho trovati. Immagino che questo in effetti non sia mai stato chiesto qui ... Ho trovato questo però: stackoverflow.com/questions/7757943/what-is-a-pseudo-element
Šime Vidas

@zzzzBov Mi sento come se avessi bisogno di un traduttore per capirlo :)
tybro0103

Grazie per aver postato questa domanda. Non sono sicuro del motivo per cui non avevo pensato di pubblicarlo io stesso dopo il mio recente blitzkrieg su domande con il tag [pseudo-selector] ...
BoltClock

Risposte:


79

La raccomandazione del selettore CSS 3 è abbastanza chiara su entrambi, ma cercherò comunque di mostrare le differenze.

Pseudo-classi

Descrizione ufficiale

Il concetto di pseudo-classe viene introdotto per consentire la selezione basata su informazioni che si trovano al di fuori dell'albero del documento o che non possono essere espresse utilizzando altri semplici selettori.

Una pseudo-classe è sempre costituita da un "due punti" ( :) seguito dal nome della pseudo-classe e, facoltativamente, da un valore tra parentesi.

Le pseudo-classi sono consentite in tutte le sequenze di selettori semplici contenuti in un selettore. Le pseudo-classi sono consentite ovunque nelle sequenze di selettori semplici, dopo il selettore di tipo iniziale o il selettore universale (eventualmente omesso). I nomi delle pseudo-classi non fanno distinzione tra maiuscole e minuscole. Alcune pseudo-classi si escludono a vicenda, mentre altre possono essere applicate simultaneamente allo stesso elemento. Le pseudo-classi possono essere dinamiche, nel senso che un elemento può acquisire o perdere una pseudo-classe mentre un utente interagisce con il documento.

fonte

Cosa significa questo?

L'importante natura delle pseudo-classi è dichiarata nella primissima frase: "il concetto di pseudo-classe [...] permette la selezione " . Consente all'autore di un foglio di stile di differire tra gli elementi in base alle informazioni che "si trovano al di fuori dell'albero del documento" , ad esempio lo stato corrente di un collegamento ( :active, :visited). Quelli non vengono salvati da nessuna parte nel DOM e non esiste un'interfaccia DOM per accedere a queste opzioni.

D'altra parte, si :targetpotrebbe accedere tramite la manipolazione DOM (si potrebbe usare window.location.hashper trovare l'oggetto con JavaScript), ma questo "non può essere espresso usando gli altri semplici selettori" .

Quindi fondamentalmente una pseudo-classe raffinerà l'insieme di elementi selezionati come qualsiasi altro selettore semplice in una sequenza di selettori semplici . Si noti che tutti i selettori semplici in una sequenza di selettori semplici verranno valutati contemporaneamente. Per un elenco completo delle pseudo-classi, controlla la raccomandazione del selettore CSS3.

Esempio

L'esempio seguente colorerà tutte le righe pari di grigio ( #ccc), tutte le righe irregolari che non sono divisibili per 5 bianche e ogni altra riga di magenta.

table tr:nth-child(2n) td{
   background-color: #ccc;
}

table tr:nth-child(2n+1) td{
   background-color: #fff;
}

table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

Pseudo-elementi

Descrizione ufficiale

Gli pseudo-elementi creano astrazioni sull'albero del documento oltre a quelle specificate dal linguaggio del documento. Ad esempio, i linguaggi dei documenti non offrono meccanismi per accedere alla prima lettera o alla prima riga del contenuto di un elemento. Gli pseudo-elementi consentono agli autori di fare riferimento a queste informazioni altrimenti inaccessibili. Pseudo-elementi possono anche fornire agli autori un modo per riferirsi al contenuto che non esiste nel documento di origine (ad esempio, la ::beforee ::afterpseudo-elementi danno accesso al contenuto generato).

Uno pseudoelemento è composto da due due punti ( ::) seguiti dal nome dello pseudoelemento.

Questa ::notazione è introdotta dal presente documento al fine di stabilire una discriminazione tra pseudo-classi e pseudo-elementi. Per compatibilità con i fogli di stile esistenti, i programmi utente devono anche accettare la precedente notazione di un punto e virgola per gli pseudo-elementi introdotti nei livelli CSS 1 e 2 (vale a dire,: first-line,: first-letter,: before e: after). Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica.

Può comparire un solo pseudo-elemento per selettore, e se presente deve comparire dopo la sequenza di selettori semplici che rappresenta i soggetti del selettore.

Nota: una versione futura di questa specifica potrebbe consentire più pseudo-elementi per selettore.

fonte

Cosa significa questo?

La parte più importante qui è che "gli pseudo-elementi consentono agli autori di fare riferimento a [..] informazioni altrimenti inaccessibili " e che "possono anche fornire agli autori un modo per fare riferimento a contenuti che non esistono nel documento di origine (ad esempio, il ::beforee gli ::afterpseudo-elementi danno accesso al contenuto generato). ". La differenza più grande è che in realtà creano un nuovo elemento virtuale su cui è possibile applicare regole e persino selettori di pseudo-classe. Non filtrano gli elementi, fondamentalmente filtrano il contenuto ( ::first-line, ::first-letter) e lo avvolgono in un contenitore virtuale, che l'autore può modellare come vuole (beh, quasi).

Ad esempio, lo ::first-linepseudo-elemento non può essere ricostruito con JavaScript, poiché dipende fortemente dal carattere attualmente utilizzato, dalla dimensione del carattere, dalla larghezza degli elementi, dagli elementi mobili (e probabilmente dall'ora del giorno). Bene, non è del tutto vero: si potrebbero ancora calcolare tutti quei valori ed estrarre la prima riga, tuttavia farlo è un'attività molto complicata.

Immagino che la differenza più grande sia che "può apparire solo uno pseudo-elemento per selettore" . La nota dice che questo potrebbe essere soggetto a modifiche, ma a partire dal 2012 non credo che vedremo alcun comportamento diverso in futuro ( è ancora in CSS4 ).

Esempio

Il seguente esempio aggiungerà un tag di lingua a ogni citazione su una data pagina utilizzando la pseudo-classe :lange lo pseudo-elemento ::after:

q:lang(de)::after{
    content: " (German) ";
}

q:lang(en)::after{
    content: " (English) ";
}

q:lang(fr)::after{
    content: " (French) ";
}

q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

TL; DR

Le pseudo-classi agiscono come semplici selettori in una sequenza di selettori e quindi classificano gli elementi in base a caratteristiche non presentazionali, gli pseudo-elementi creano nuovi elementi virtuali.

Riferimenti

W3C


4
Sono d'accordo con il commento di DanMan sulla risposta di SLaks in quanto le pseudo-classi non agiscono realmente come "filtri" ma più come "descrittori". Ad esempio, :not(.someclass):nth-child(even)non significa filtrare gli elementi che non hanno .someclasse tra gli elementi rimanenti filtrare le occorrenze pari. Invece rappresenta qualsiasi elemento che è sia :not(.someclass) e :nth-child(even) del suo genitore allo stesso tempo. Spiegazioni più approfondite possono essere trovate in questa risposta e in questa risposta .
BoltClock

2
@BoltClock: Credo che mi piaccia di più il termine "caratteristico-classificatore" , dal momento che questo è ciò che in qualche modo erano originariamente descritti come in CSS2: "Le pseudo-classi classificano gli elementi su caratteristiche diverse dal loro nome" . Tuttavia, non ho ancora trovato la formulazione esatta di cui sono soddisfatto.
Zeta

42

Una pseudo-classe filtra gli elementi esistenti.
a:linksignifica tutto <a>ciò che è :link.

Uno pseudo-elemento è un nuovo elemento falso.
div::aftersignifica elementi inesistenti dopo <div>s.

::selectionè un altro esempio di uno pseudo-elemento.
Non significa tutti gli elementi selezionati; significa l'intervallo di contenuto selezionato, che può comprendere porzioni di più elementi.


12
+1 sebbene tecnicamente div::aftersia un figlio di div, che si verifica dopo il suo contenuto piuttosto che l'elemento stesso.
BoltClock

1
Invece di "filtri" direi "descrive ulteriormente".
DanMan

17

Breve descrizione che mi ha aiutato a capire la differenza:

  • Le pseudo-classi descrivono uno stato speciale.
  • Gli pseudo-elementi corrispondono agli elementi virtuali.

10

Dai documenti di Sitepoint:

Una pseudo-classe è simile a una classe in HTML, ma non è specificata esplicitamente nel markup. Alcune pseudo-classi sono dinamiche: vengono applicate come risultato dell'interazione dell'utente con il documento. - http://reference.sitepoint.com/css/pseudoclasses . Queste sarebbero cose come :hover, :active, :visited.

Gli pseudo-elementi corrispondono a elementi virtuali che non esistono esplicitamente nell'albero del documento. Gli pseudo-elementi possono essere dinamici, in quanto gli elementi virtuali che rappresentano possono cambiare, ad esempio, quando viene modificata la larghezza della finestra del browser. Possono anche rappresentare il contenuto generato dalle regole CSS. - http://reference.sitepoint.com/css/pseudoelements . Queste sarebbero cose come before, :after, :first-letter.


7

Di seguito è la semplice risposta:

Usiamo la pseudo-classe quando abbiamo bisogno di applicare css in base allo stato di un elemento. Ad esempio:

  1. Applica CSS al passaggio del mouse sull'elemento di ancoraggio ( :hover)
  2. Applica css quando si concentra su un elemento html ( :focus). eccetera.

Usiamo pseudo-elemento quando abbiamo bisogno di applicare CSS a parti specifiche di un elemento o di un contenuto appena inserito . Ad esempio:

  1. Applica il css alla prima lettera o alla prima riga di un elemento ( ::first-letter)
  2. Inserisci contenuto prima o dopo il contenuto di un elemento ( ::before, ::after)

Di seguito è riportato l'esempio di entrambi:

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>

6

Una risposta concettuale:

  • Uno pseudo-elemento si riferisce a cose che fanno parte del documento, ma semplicemente non lo sai ancora. Ad esempio la prima lettera. Prima avevi solo testo. Ora hai una prima lettera che puoi scegliere come target. È un nuovo concetto, ma è sempre stato parte del documento. Questo include anche cose come ::before; anche se non c'è un contenuto effettivo lì, il concetto di qualcosa prima di qualcos'altro era sempre lì - ora lo stai specificando.

  • Una pseudo-classe è lo stato di qualcosa nel DOM. Proprio come una classe è un tag che associ a un elemento, una pseudo-classe è una classe che viene associata dal browser o DOM o qualsiasi altra cosa, di solito come risposta a un cambiamento di stato. Quando un utente visita un collegamento, quel collegamento può assumere lo stato di "visitato". Puoi immaginare il browser che applica la classe "visitata" all'elemento Anchor. :visitedsarebbe quindi come si seleziona per quella pseudo-classe.


4

Pseudo-classe

Una pseudo-classe è un modo per selezionare alcune parti di un documento HTML, basato in linea di principio non sull'albero del documento HTML stesso e sui suoi elementi o su caratteristiche come nome, attributi o contenuti, ma su altre condizioni fantasma come la codifica del linguaggio o lo stato dinamico di un elemento.

La pseudo-classe originale ha definito gli stati dinamici di un elemento che vengono immessi e usciti nel tempo o tramite l'intervento dell'utente. I CSS2 hanno ampliato questo concetto per includere componenti di documenti concettuali virtuali o porzioni dedotte dell'albero del documento, ad esempio il primo figlio. Le pseudo-classi funzionano come se classi fantasma fossero state aggiunte a vari elementi.

RESTRIZIONI: a differenza degli pseudo-elementi, le pseudo-classi possono apparire ovunque nella catena del selettore.

Esempio di codice pseudo-classe:

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

Una pagina che mostra un rendering del codice di pseudo-classe sopra

Pseudo-elementi

Gli PSEUDO-ELEMENTI vengono utilizzati per indirizzare le sottoparti degli elementi. Consentono di impostare lo stile su una parte del contenuto di un elemento oltre a quanto specificato nei documenti. In altre parole, consentono di definire elementi logici che non si trovano effettivamente nell'albero degli elementi del documento. Gli elementi logici consentono di indirizzare la struttura semantica implicita nei selettori CSS.

RESTRIZIONI: gli pseudo-elementi possono essere applicati solo a contesti esterni ea livello di documento, non a stili in linea. Gli pseudo-elementi sono limitati a dove possono apparire in una regola. Possono apparire solo alla fine di una catena di selettori (dopo l'oggetto del selettore). Dovrebbero venire dopo qualsiasi nome di classe o ID trovato nel selettore. È possibile specificare un solo pseudo-elemento per selettore. Per indirizzare più pseudo-elementi su una struttura a singolo elemento, devono essere fatte più dichiarazioni di selettore / dichiarazione di stile.

Gli pseudo-elementi possono essere utilizzati per effetti tipografici comuni come maiuscole e capolettera. Possono anche indirizzare il contenuto generato che non è nel documento sorgente (con il "prima" e il "dopo") Segue un foglio di stile di esempio di alcuni pseudo-elementi con proprietà e valori aggiunti.

/ * La regola seguente seleziona la prima lettera di un'intestazione 1 e imposta il carattere su 2em, corsivo, con uno sfondo verde. First-letter seleziona la prima lettera / carattere renderizzato per un elemento a livello di blocco. * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

Fonti: Link


0

In breve, da Pseudo-classi su MDN:

Una pseudo-classe CSS è una parola chiave aggiunta a un selettore che specifica uno stato speciale degli elementi selezionati. Ad esempio, :hover può essere utilizzato per applicare uno stile quando l'utente passa il mouse su un pulsante.

div: hover {
  colore di sfondo: # F89B4D;
}

E, da Pseudo-elementi su MDN:

Un CSS pseudo-elemento è una parola chiave aggiunto a un selettore che consente di stile A parte specifica l'elemento selezionato (s). Ad esempio, ::first-linepuò essere utilizzato per definire lo stile della prima riga di un paragrafo.

/ * La prima riga di ogni elemento <p>. * /
p :: first-line {
 colore blu;
 text-transform: maiuscolo;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.