Cose come a:link
o div::after
...
Le informazioni sulla differenza sembrano scarse.
Cose come a:link
o div::after
...
Le informazioni sulla differenza sembrano scarse.
Risposte:
La raccomandazione del selettore CSS 3 è abbastanza chiara su entrambi, ma cercherò comunque di mostrare le differenze.
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.
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 :target
potrebbe accedere tramite la manipolazione DOM (si potrebbe usare window.location.hash
per 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.
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;
}
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
::before
e::after
pseudo-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.
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 ::before
e gli ::after
pseudo-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-line
pseudo-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 ).
Il seguente esempio aggiungerà un tag di lingua a ogni citazione su una data pagina utilizzando la pseudo-classe :lang
e 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) ";
}
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.
Un selettore semplice è un selettore di tipo o un selettore universale seguito immediatamente da zero o più selettori di attributi, selettori di ID o pseudo-classi, in qualsiasi ordine. Il selettore semplice corrisponde se tutti i suoi componenti corrispondono.
:not(.someclass):nth-child(even)
non significa filtrare gli elementi che non hanno .someclass
e 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 .
Una pseudo-classe filtra gli elementi esistenti.
a:link
significa tutto <a>
ciò che è :link
.
Uno pseudo-elemento è un nuovo elemento falso.
div::after
significa 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.
div::after
sia un figlio di div
, che si verifica dopo il suo contenuto piuttosto che l'elemento stesso.
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
.
Di seguito è la semplice risposta:
Usiamo la pseudo-classe quando abbiamo bisogno di applicare css in base allo stato di un elemento. Ad esempio:
:hover
):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:
::first-letter
)::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>
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. :visited
sarebbe quindi come si seleziona per quella pseudo-classe.
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
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-line
può 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; }