Was ist der Unterschied zwischen einer pseudo-Klassen und pseudo-Elemente in CSS?

Den CSS 3-Selektor Empfehlung ist ziemlich klar, über die beiden, aber ich werde versuchen zu zeigen, der Unterschiede sowieso.

Pseudo-Klassen

Offizielle Beschreibung

Den pseudo-Klassen-Konzept wird eingeführt, um zu erlauben, die Auswahl basiert auf den Informationen, liegt außerhalb des document-Baum oder, nicht ausgedrückt werden kann mit den anderen einfach-Selektoren.

Einer pseudo-Klasse besteht immer aus einem "Doppelpunkt" ( : ), gefolgt von dem Namen der pseudo-Klasse und Optional einen Wert zwischen Klammern.

Pseudo-Klassen erlaubt sind, die in allen Sequenzen von einfachen Selektoren, die in einem Selektor. Pseudo-Klassen sind erlaubt überall in Sequenzen von einfachen Selektoren, nach dem ersten Typselektor oder ein universeller Selektor (evtl. weggelassen werden). Pseudo-class-Namen sind case-insensitive. Einige pseudo-Klassen schließen sich gegenseitig aus, während andere können gleichzeitig angewendet werden auf das gleiche element. Pseudo-Klassen können dynamisch sein, in dem Sinne, dass ein element zu erwerben oder verlieren, wird eine pseudo-Klasse, bei der ein Benutzer interagiert mit dem Dokument.

Quelle

Was bedeutet das?

Wichtige Art von pseudo-Klassen wird bereits im ersten Satz: "die pseudo-Klasse-Konzept [...] erlauben die Auswahl". Es ermöglicht dem Autor eines Stylesheets zu unterscheiden zwischen den Elementen, die basierend auf Informationen, die "liegt außerhalb des document-tree"zum Beispiel den aktuellen status eines Links (:active,:visited). Diese werden nicht gespeichert, die überall im DOM, und es besteht kein DOM-Schnittstelle für den Zugriff auf diese Optionen.

Auf der anderen Seite :target zugegriffen werden konnte über DOM-manipulation (Sie könnte verwenden window.location.hash um das zu finden, das Objekt mit JavaScript), aber diese "nicht ausgedrückt werden kann mit den andere einfache Selektoren".

Also im Grunde eine pseudo-Klasse verfeinern Sie die Menge der ausgewählten Elemente als jeder andere einfache Selektor in einem Abfolge von einfachen Selektoren. Beachten Sie, dass alle einfachen Selektoren, die in einer Abfolge von einfachen Selektoren, ausgewertet werden, in der gleichen Zeit. Für eine vollständige Liste der pseudo-Klasse überprüfen Sie die CSS3-Selektor Empfehlung.

Beispiel

Folgenden Beispiel wird die Farbe auch Zeilen Grau (#ccc), alle ungleichen Zeilen, die nicht teilbar durch 5 weiße und jeder anderen 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;
}

Pseudo-Elemente

Offizielle Beschreibung

Pseudo-Elemente erzeugen Abstraktionen, die über die Dokument-Baum hinausgehen, indem Sie die Sprache des Dokuments. Zum Beispiel, Dokument-Sprachen bieten keine Mechanismen, um den Zugriff auf den ersten Buchstaben oder die erste Zeile eines Elements, content. Pseudo-Elemente erlauben Autoren, um auf diese ansonsten nicht zugänglichen Informationen. Pseudo-Elemente können auch liefern die Autoren einen Weg, um auf Inhalte verweisen, die nicht vorhanden ist in das Quelldokument (z.B. die ::before und ::after pseudo-Elemente geben Ihnen den Zugang zu generated content).

Einem pseudo-element besteht aus zwei Doppelpunkte ( :: ), gefolgt von dem Namen der pseudo-element.

Diese :: notation wird eingeführt, durch das aktuelle Dokument, um eine Diskriminierung zwischen pseudo-Klassen und pseudo-Elemente. Für die Kompatibilität mit vorhandenen style sheets, user-agents müssen auch die akzeptieren, die früheren one-Doppelpunkt-notation für pseudo-Elemente eingeführt, die in CSS-Ebenen 1 und 2 (nämlich :first-line, :first-letter, :before und :after). Diese Kompatibilität gilt nicht für die neuen pseudo-Elemente eingeführt, die in dieser Spezifikation.

Nur ein pseudo-element erscheinen können pro Selektor und, wenn vorhanden muss er sich nach der Abfolge von einfachen Selektoren, die für die Subjekte des Selektors.

Anmerkung: in Einer zukünftigen version dieser Spezifikation können damit mehrere pseudo-Elemente pro Selektor.

Quelle

Was bedeutet das?

Der wichtigste Teil hierbei ist, dass "pseudo-Elemente erlauben dem Autor finden Sie unter [..] ansonsten unzugänglichen Informationen" und dass Sie "kann auch liefern die Autoren einen Weg, um auf Inhalte verweisen, die nicht vorhanden ist in das Quelldokument (z.B. die ::before und ::after pseudo-Elemente geben Ihnen den Zugang zu generated content).". Der größte Unterschied ist, dass Sie tatsächlich erstellen Sie ein neues virtuelles element, auf dem die Regeln und auch pseudo-class-Selektoren angewendet werden kann. Sie nicht filtern, die Elemente, die Sie im Grunde das filtern von Inhalt (::first-line,::first-letter) und wickeln Sie es in einem virtuellen container, in denen der Autor kann Stil aber er will (naja, fast).

Beispielsweise die ::first-line pseudo-element kann nicht rekonstruiert werden mit JavaScript, da es stark abhängig von dem aktuell verwendeten schriftart, die Schriftgröße, die Elemente Breite, floating elements (und wahrscheinlich die Zeit des Tages). Naja, das stimmt nicht ganz: könnte man noch ermitteln Sie alle diejenigen Werte, und extrahieren Sie die erste Zeile, aber dies ist eine sehr mühsame Tätigkeit.

Ich denke, der größte Unterschied ist, dass "nur ein pseudo-element erscheinen können pro Selektor". Der Hinweis sagt, dass dies könnte sich ändern, aber wie 2012 ich glaube nicht, dass wir sehen alle anderes Verhalten in der Zukunft (es ist immer noch in CSS4).

Beispiel

Folgenden Beispiel wird eine Sprache hinzufügen-tag, um jedes Zitat auf eine bestimmte Seite mit der pseudo-Klasse :lang und das pseudo-element ::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

Pseudo-Klassen fungieren als einfache Selektoren in eine Sequenz von Auswahlen und damit klassifizieren Sie die Elemente auf nicht-repräsentativen Eigenschaften, pseudo-Elemente erstellen Sie neue virtuelle Elemente.

Referenzen

W3C

• Selectors Level 3
  • 4. Selektor-syntax
  • 6.6-Pseudo-Klassen
  • 7. Pseudo-Elemente
• CSS-2.1-Spezifikation (veraltet, aber immer noch informativ)
  • 5.2-Selektor-syntax:
    

    Ein einfacher Selektor ist entweder ein Typselektor oder ein universeller Selektor, unmittelbar gefolgt von null oder mehr Attribut-Selektoren, ID-Selektoren oder pseudo-Klassen in beliebiger Reihenfolge. Das einfache Selektor passt, wenn alle seine Komponenten übereinstimmen.

  • 5.10 Pseudo-Elemente und pseudo-Klassen

InformationsquelleAutor der Antwort Zeta

Kurze Beschreibung, die mir geholfen haben um den Unterschied zu verstehen:

• Pseudo-Klassen beschreiben einen speziellen Zustand.
• Pseudo-Elemente entsprechen virtuellen Elemente.

InformationsquelleAutor der Antwort jerone

Einer konzeptionellen Antwort:

• Einem pseudo-element bezieht sich auf Dinge, die Teil des Dokuments, aber Sie nur don ' T wissen es noch nicht. Zum Beispiel den ersten Buchstaben. Bevor Sie hatte nur text. Jetzt haben Sie einen ersten Brief, den Sie ansprechen können. Es ist ein neues Konzept, sondern war immer Bestandteil des Dokuments. Dies beinhaltet auch Dinge wie ::before; wenn es keinen wirklichen Inhalt gibt es, das Konzept von etwas, das vorher etwas anderes war immer da-jetzt geben Sie es.

• Einer pseudo-Klasse ist ein Zustand von etwas in der DOM. Genau wie eine Klasse einen tag, die Sie assoziieren mit einem element, einem pseudo-Klasse ist eine Klasse, wird verbunden durch den browser oder DOM oder was auch immer, in der Regel als Reaktion auf eine änderung im Zustand. Besucht ein Nutzer einen link -- link kann auf den Status 'besucht'. Sie können sich vorstellen, die browser-Anwendung der Klasse "besucht", das Anchor-element. :visited würde dann sein, wie Sie für die pseudo-Klasse.

InformationsquelleAutor der Antwort Gerard ONeill

Unten ist die einfache Antwort:

Verwenden wir Pseudoklassewenn wir brauchen, um css anzuwenden, basierend auf der Zustand eines Elements. Wie:

1. Anwenden von css bei hover die Anker-element (:hover)
2. Css anzuwenden, wenn fokussiert wird auf ein html-element (:focus). etc.

Verwenden wir pseudo-elementwenn wir brauchen, um css anzuwenden, um die bestimmte Teile eines elements oder einer neu eingefügt Inhalt. Wie:

1. Gelten die css ersten Buchstaben oder die erste Zeile eines Elements (::first-letter)
2. Inhalte einfügen vor oder nach dem Inhalt eines Elements (::before::after)

Unten ist das Beispiel für beide:

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

InformationsquelleAutor der Antwort Sheo Dayal Singh