Dinge wie a:linkoder div::after...

Informationen über den Unterschied scheinen rar.

Die CSS 3-Auswahlempfehlung ist für beide ziemlich klar, aber ich werde trotzdem versuchen, die Unterschiede aufzuzeigen.

Pseudoklassen

Offizielle Beschreibung

Das Pseudoklassenkonzept wird eingeführt, um eine Auswahl basierend auf Informationen zu ermöglichen, die außerhalb des Dokumentbaums liegen oder die nicht mit den anderen einfachen Selektoren ausgedrückt werden können.

Eine Pseudoklasse besteht immer aus einem "Doppelpunkt" ( :), gefolgt vom Namen der Pseudoklasse und optional einem Wert in Klammern.

Pseudoklassen sind in allen Sequenzen einfacher Selektoren zulässig, die in einem Selektor enthalten sind. Pseudoklassen sind überall in Sequenzen einfacher Selektoren nach dem führenden Typselektor oder dem universellen Selektor (möglicherweise weggelassen) zulässig. Pseudoklassennamen unterscheiden nicht zwischen Groß- und Kleinschreibung. Einige Pseudoklassen schließen sich gegenseitig aus, während andere gleichzeitig auf dasselbe Element angewendet werden können. Pseudoklassen können dynamisch sein, in dem Sinne, dass ein Element eine Pseudoklasse erwerben oder verlieren kann, während ein Benutzer mit dem Dokument interagiert.

Quelle

Was bedeutet das?

Die wichtige Natur von Pseudoklassen wird im allerersten Satz angegeben: "Das Pseudoklassenkonzept [...] erlaubt die Auswahl " . Dadurch kann der Autor eines Stylesheets zwischen Elementen unterscheiden, die auf Informationen basieren, die "außerhalb des Dokumentbaums liegen" , z. B. dem aktuellen Status eines Links ( :active, :visited). Diese werden nirgendwo im DOM gespeichert, und es gibt keine DOM-Schnittstelle für den Zugriff auf diese Optionen.

Auf der anderen Seite :targetkönnte über eine DOM-Manipulation zugegriffen werden (Sie können verwenden window.location.hash, um das Objekt mit JavaScript zu finden), dies kann jedoch "nicht mit den anderen einfachen Selektoren ausgedrückt werden" .

Im Grunde genommen verfeinert eine Pseudoklasse den Satz ausgewählter Elemente wie jeden anderen einfachen Selektor in einer Folge einfacher Selektoren . Beachten Sie, dass alle einfachen Selektoren in einer Folge von einfachen Selektoren gleichzeitig ausgewertet werden. Eine vollständige Liste der Pseudoklassen finden Sie in der CSS3-Auswahlempfehlung.

Beispiel

Im folgenden Beispiel werden alle geraden Zeilen grau ( #ccc) gefärbt , alle unebenen Zeilen, die nicht durch 5 Weiß geteilt werden können, und jede zweite Zeile 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;
}

Pseudoelemente

Offizielle Beschreibung

Pseudoelemente erzeugen Abstraktionen über den Dokumentbaum, die über die in der Dokumentensprache angegebenen hinausgehen. Beispielsweise bieten Dokumentensprachen keine Mechanismen für den Zugriff auf den ersten Buchstaben oder die erste Zeile des Inhalts eines Elements. Mit Pseudoelementen können Autoren auf diese ansonsten unzugänglichen Informationen verweisen. Pseudoelemente können Autoren auch die Möglichkeit bieten, auf Inhalte zu verweisen, die im Quelldokument nicht vorhanden sind (z. B. ermöglichen die Pseudoelemente ::beforeund ::afterden Zugriff auf generierte Inhalte).

Ein Pseudoelement besteht aus zwei Doppelpunkten ( ::), gefolgt vom Namen des Pseudoelements.

Diese ::Notation wird durch das aktuelle Dokument eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen herzustellen. Aus Gründen der Kompatibilität mit vorhandenen Stylesheets müssen Benutzerprogramme auch die vorherige Ein-Doppelpunkt-Notation für Pseudoelemente akzeptieren, die in den CSS-Ebenen 1 und 2 eingeführt wurden (nämlich: erste Zeile ,: erster Buchstabe ,: vor und: nachher). Diese Kompatibilität ist für die in dieser Spezifikation eingeführten neuen Pseudoelemente nicht zulässig.

Pro Selektor darf nur ein Pseudoelement erscheinen, und falls vorhanden, muss es nach der Folge einfacher Selektoren erscheinen, die die Subjekte des Selektors darstellen.

Hinweis: Eine zukünftige Version dieser Spezifikation kann mehrere Pseudoelemente pro Selektor zulassen.

Quelle

Was bedeutet das?

Der wichtigste Teil hierbei ist, dass "Pseudoelemente es Autoren ermöglichen, auf [..] ansonsten unzugängliche Informationen zu verweisen " und dass sie "Autoren auch die Möglichkeit bieten, auf Inhalte zu verweisen, die im Quelldokument nicht vorhanden sind (z ::beforeund ::afterPseudoelemente ermöglichen den Zugriff auf generierten Inhalt. " Der größte Unterschied besteht darin, dass sie tatsächlich ein neues virtuelles Element erstellen, auf das Regeln und sogar Pseudoklassenselektoren angewendet werden können. Sie filtern keine Elemente, sondern filtern Inhalte ( ::first-line, ::first-letter) und verpacken sie in einen virtuellen Container, den der Autor nach Belieben formatieren kann ( na ja, fast).

Beispielsweise kann das ::first-linePseudoelement nicht mit JavaScript rekonstruiert werden, da es stark von der aktuell verwendeten Schriftart, der Schriftgröße, der Elementbreite, den schwebenden Elementen (und wahrscheinlich der Tageszeit) abhängt. Nun, das ist nicht ganz richtig: Man könnte immer noch alle diese Werte berechnen und die erste Zeile extrahieren, dies ist jedoch eine sehr umständliche Aktivität.

Ich denke, der größte Unterschied besteht darin, dass "nur ein Pseudoelement pro Selektor erscheinen darf" . Der Hinweis besagt, dass sich dies ändern könnte, aber ab 2012 glaube ich nicht, dass wir in Zukunft ein anderes Verhalten sehen werden ( es ist immer noch in CSS4 ).

Beispiel

Im folgenden Beispiel wird jedem Zitat auf einer bestimmten Seite ein Sprach-Tag hinzugefügt, wobei die Pseudoklasse :langund das Pseudoelement verwendet werden ::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

Pseudoklassen fungieren als einfache Selektoren in einer Folge von Selektoren und klassifizieren dabei Elemente nach nicht präsentativen Merkmalen. Pseudoelemente erzeugen neue virtuelle Elemente.

Verweise

W3C

• Selektoren Stufe 3
  • 4. Auswahlsyntax
  • 6.6 Pseudoklassen
  • 7. Pseudoelemente
• CSS 2.1-Spezifikation (veraltet, aber immer noch informativ)
  • 5.2 Auswahlsyntax :

    Ein einfacher Selektor ist entweder ein Typselektor oder ein universeller Selektor, unmittelbar gefolgt von null oder mehr Attributselektoren, ID-Selektoren oder Pseudoklassen in beliebiger Reihenfolge. Der einfache Selektor stimmt überein, wenn alle seine Komponenten übereinstimmen.

  • 5.10 Pseudoelemente und Pseudoklassen

Eine Pseudoklasse filtert vorhandene Elemente.
a:linkbedeutet alle <a>s, die sind :link.

Ein Pseudoelement ist ein neues falsches Element.
div::afterbedeutet nicht existierende Elemente nach <div>s.

::selectionist ein weiteres Beispiel für ein Pseudoelement.
Dies bedeutet nicht, dass alle Elemente ausgewählt sind. Dies bedeutet den ausgewählten Inhaltsbereich, der Teile mehrerer Elemente umfassen kann.

Kurze Beschreibung, die mir geholfen hat, den Unterschied zu verstehen:

• Pseudoklassen beschreiben einen besonderen Zustand.
• Pseudoelemente stimmen mit virtuellen Elementen überein.

Aus den Sitepoint-Dokumenten:

Eine Pseudoklasse ähnelt einer Klasse in HTML, wird jedoch im Markup nicht explizit angegeben. Einige Pseudoklassen sind dynamisch - sie werden aufgrund der Benutzerinteraktion mit dem Dokument angewendet. - http://reference.sitepoint.com/css/pseudoclasses . Das wären Dinge wie :hover, :active, :visited.

Pseudoelemente stimmen mit virtuellen Elementen überein, die im Dokumentbaum nicht explizit vorhanden sind. Pseudoelemente können dynamisch sein, da sich die virtuellen Elemente, die sie darstellen, ändern können, beispielsweise wenn die Breite des Browserfensters geändert wird. Sie können auch Inhalte darstellen, die durch CSS-Regeln generiert wurden. - http://reference.sitepoint.com/css/pseudoelements . Das wären Dinge wie before, :after, :first-letter.

Eine konzeptionelle Antwort:

• Ein Pseudoelement bezieht sich auf Dinge, die Teil des Dokuments sind, aber Sie wissen es einfach noch nicht. Zum Beispiel der erste Buchstabe. Vorher hatten Sie nur Text. Jetzt haben Sie einen ersten Buchstaben, auf den Sie zielen können. Es ist ein neues Konzept, war aber immer Teil des Dokuments. Dies beinhaltet auch Dinge wie ::before; Während es dort keinen tatsächlichen Inhalt gibt, war das Konzept von etwas vor etwas anderem immer da - jetzt spezifizieren Sie es.

• Eine Pseudoklasse ist der Zustand von etwas im DOM. So wie eine Klasse ein Tag ist, das Sie einem Element zuordnen, ist eine Pseudoklasse eine Klasse, die vom Browser oder DOM oder was auch immer zugeordnet wird, normalerweise als Reaktion auf eine Statusänderung. Wenn ein Benutzer einen Link besucht, kann dieser Link den Status "besucht" annehmen. Sie können sich vorstellen, dass der Browser die Klasse "besucht" auf das Ankerelement anwendet. :visitedwäre dann, wie Sie für diese Pseudoklasse auswählen.

Unten ist die einfache Antwort:

Wir verwenden Pseudo-Klasse , wenn wir CSS anwenden müssen , basierend auf dem Zustand eines Elements. Sowie:

1. Wende CSS auf den Schwebeflug des Ankerelements an ( :hover)
2. Wenden Sie CSS an, wenn Sie sich auf ein HTML-Element konzentrieren ( :focus). etc.

Wir verwenden Pseudoelemente, wenn wir CSS auf bestimmte Teile eines Elements oder einen neu eingefügten Inhalt anwenden müssen . Sowie:

1. Wenden Sie das CSS auf den ersten Buchstaben oder die erste Zeile eines Elements an ( ::first-letter)
2. Fügen Sie Inhalte vor oder nach dem Inhalt eines Elements ein ( ::before, ::after)

Unten ist das Beispiel von beiden:

<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>

Pseudo-Klasse

Eine Pseudoklasse ist eine Methode zur Auswahl bestimmter Teile eines HTML-Dokuments, die im Prinzip nicht auf dem HTML-Dokumentbaum selbst und seinen Elementen oder auf Merkmalen wie Name, Attributen oder Inhalten basiert, sondern auf anderen Phantombedingungen wie der Sprachcodierung oder dem dynamischen Zustand eines Elements.

Die ursprüngliche Pseudoklasse definierte dynamische Zustände eines Elements, die im Laufe der Zeit oder durch Benutzereingriffe eingegeben und beendet werden. CSS2 erweiterte dieses Konzept um virtuelle konzeptionelle Dokumentkomponenten oder abgeleitete Teile des Dokumentbaums, z. B. das erste Kind. Pseudoklassen funktionieren so, als ob verschiedenen Elementen Phantomklassen hinzugefügt worden wären.

EINSCHRÄNKUNGEN: Im Gegensatz zu Pseudoelementen können Pseudoklassen überall in der Auswahlkette auftreten.

Beispiel für einen Pseudoklassencode:

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 */
}

Eine Seite, die das Rendern des obigen Pseudoklassencodes demonstriert

Pseudoelemente

PSEUDO-ELEMENTE werden verwendet, um Unterteile von Elementen zu adressieren. Mit ihnen können Sie einen Stil für einen Teil des Inhalts eines Elements festlegen, der über die in den Dokumenten angegebenen Werte hinausgeht. Mit anderen Worten, sie ermöglichen die Definition logischer Elemente, die sich nicht im Dokumentelementbaum befinden. Logische Elemente ermöglichen die Adressierung impliziter semantischer Strukturen in CSS-Selektoren.

EINSCHRÄNKUNGEN: Pseudoelemente dürfen nur auf externe Kontexte und Kontexte auf Dokumentebene angewendet werden - nicht auf Inline-Stile. Pseudoelemente sind darauf beschränkt, wo sie in einer Regel erscheinen können. Sie dürfen nur am Ende einer Selektorkette erscheinen (nach dem Thema des Selektors). Sie sollten nach allen Klassen- oder ID-Namen kommen, die im Selektor gefunden wurden. Pro Selektor kann nur ein Pseudoelement angegeben werden. Um mehrere Pseudoelemente in einer einzelnen Elementstruktur zu adressieren, müssen mehrere Stilauswahl- / Deklarationsanweisungen gemacht werden.

Pseudoelemente können für gängige typografische Effekte wie Initial Caps und Drop Caps verwendet werden. Sie können auch generierten Inhalt adressieren, der nicht im Quelldokument enthalten ist (mit "vor" und "nach"). Es folgt ein Beispiel für ein Stylesheet einiger Pseudoelemente mit hinzugefügten Eigenschaften und Werten.

/ * Die folgende Regel wählt den ersten Buchstaben einer Überschrift 1 aus und setzt die Schriftart auf 2em, kursiv, mit grünem Hintergrund. Der erste Buchstabe wählt den ersten gerenderten Buchstaben / das erste gerenderte Zeichen für ein Element auf Blockebene aus. * /

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;
}

Quellen: Link

Kurz gesagt, aus Pseudoklassen auf MDN:

Eine CSS -Pseudoklasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird, der einen speziellen Status der ausgewählten Elemente angibt. Zum Beispiel :hover können Sie einen Stil , wenn der Benutzer schwebt über eine Schaltfläche anwenden verwendet werden.

div: hover {
  Hintergrundfarbe: # F89B4D;
}}

Und aus Pseudoelementen auf MDN:

Ein CSS -Pseudoelement ist ein Schlüsselwort, das einem Selektor hinzugefügt wird, mit dem Sie einen bestimmten Teil der ausgewählten Elemente formatieren können. Zum Beispiel ::first-linekann verwendet werden , um die erste Zeile eines Absatzes stylen.

/ * Die erste Zeile jedes <p> -Elements. * /
p :: erste Zeile {
 Farbe blau;
 Texttransformation: Großbuchstaben;
}}