Takie rzeczy jak a:linklub div::after...

Informacje na temat różnicy wydają się skąpe.

CSS 3 zalecenie selektor jest całkiem jasne, o obu, ale postaram się pokazać różnice i tak.

Pseudoklasy

Oficjalny opis

Koncepcja pseudoklasy została wprowadzona, aby umożliwić selekcję na podstawie informacji, które znajdują się poza drzewem dokumentu lub których nie można wyrazić za pomocą innych prostych selektorów.

Pseudoklasa zawsze składa się z „dwukropka” ( :), po którym następuje nazwa pseudoklasy i opcjonalnie wartość w nawiasach.

Pseudoklasy są dozwolone we wszystkich sekwencjach prostych selektorów zawartych w selektorze. Pseudoklasy są dozwolone w dowolnym miejscu w sekwencjach selektorów prostych, po wiodącym selektorze typu lub selektorze uniwersalnym (prawdopodobnie pominięte). W nazwach pseudoklas nie jest rozróżniana wielkość liter. Niektóre pseudoklasy wykluczają się wzajemnie, podczas gdy inne mogą być stosowane jednocześnie do tego samego elementu. Pseudoklasy mogą być dynamiczne w tym sensie, że element może nabyć lub utracić pseudoklasę, gdy użytkownik wchodzi w interakcję z dokumentem.

Źródło

Co to znaczy?

O tym, jak ważne są pseudoklasy, mówi się już w pierwszym zdaniu: „koncepcja pseudoklas [...] pozwala na selekcję ” . Umożliwia autorowi arkusza stylów rozróżnianie elementów na podstawie informacji, które „znajdują się poza drzewem dokumentu” , na przykład aktualny stan łącza ( :active, :visited). Nie są one zapisywane w żadnym miejscu w DOM i nie ma interfejsu DOM umożliwiającego dostęp do tych opcji.

Z drugiej strony, :targetmożna było uzyskać do niego dostęp poprzez manipulację DOM (możesz użyć window.location.hashdo znalezienia obiektu za pomocą JavaScript), ale to „nie można tego wyrazić za pomocą innych prostych selektorów” .

Zasadniczo pseudoklasa udoskonali zbiór wybranych elementów, tak jak każdy inny prosty selektor w sekwencji prostych selektorów . Zwróć uwagę, że wszystkie proste selektory w sekwencji prostych selektorów zostaną ocenione w tym samym czasie. Aby uzyskać pełną listę pseudoklas, zapoznaj się z zaleceniami dotyczącymi selektora CSS3.

Przykład

Poniższy przykład pokoloruje wszystkie parzyste wiersze na szaro ( #ccc), wszystkie nierówne wiersze, których nie można podzielić przez 5 białych i co drugi wiersz na purpurowy.

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

Pseudoelementy

Oficjalny opis

Pseudoelementy tworzą abstrakcje dotyczące drzewa dokumentu, wykraczające poza te określone przez język dokumentu. Na przykład języki dokumentów nie oferują mechanizmów dostępu do pierwszej litery lub pierwszego wiersza zawartości elementu. Pseudoelementy pozwalają autorom odwoływać się do tych niedostępnych w innym przypadku informacji. Pseudo-elementy mogą również zapewnić autorom sposób odnieść się do treści, które nie istnieje w dokumencie źródłowym (np ::beforei::after pseudo-elementy dają dostęp do treści generowanej).

Pseudoelement składa się z dwóch dwukropków ( ::), po których następuje nazwa pseudoelementu.

Ten ::zapis został wprowadzony w obecnym dokumencie w celu rozróżnienia pseudoklas i pseudoelementów. Aby zachować zgodność z istniejącymi arkuszami stylów, programy użytkownika muszą również akceptować poprzednią notację z dwukropkiem dla pseudoelementów wprowadzonych na poziomach CSS 1 i 2 (a mianowicie: pierwsza linia,: pierwsza litera,: przed i: po). Ta kompatybilność nie jest dozwolona dla nowych pseudoelementów wprowadzonych w tej specyfikacji.

Na selektor może pojawić się tylko jeden pseudoelement, a jeśli jest obecny, to musi pojawić się po sekwencji prostych selektorów reprezentujących podmioty selektora.

Uwaga: przyszła wersja tej specyfikacji może dopuszczać wiele pseudoelementów na selektor.

Źródło

Co to znaczy?

Najważniejsze tutaj jest to, że „pseudoelementy pozwalają autorom odwoływać się do […] niedostępnych w inny sposób informacji ” oraz że „mogą również zapewniać autorom możliwość odniesienia się do treści, których nie ma w dokumencie źródłowym (np. ::beforei ::afterpseudoelementy dają dostęp do generowanych treści). ”. Największą różnicą jest to, że faktycznie tworzą nowy element wirtualny, do którego można zastosować reguły, a nawet selektory pseudoklas. Nie filtrują elementów, po prostu filtrują zawartość ( ::first-line, ::first-letter) i umieszczają ją w wirtualnym kontenerze, który autor może dowolnie stylizować (no prawie).

Na przykład ::first-linepseudoelement nie może zostać zrekonstruowany za pomocą JavaScript, ponieważ w dużej mierze zależy to od aktualnie używanej czcionki, rozmiaru czcionki, szerokości elementów, elementów pływających (i prawdopodobnie pory dnia). Cóż, to nie do końca prawda: nadal można obliczyć wszystkie te wartości i wyodrębnić pierwszą linię, jednak jest to bardzo uciążliwe.

Myślę, że największą różnicą jest to, że „na selektor może pojawić się tylko jeden pseudoelement” . W notatce jest napisane, że może to ulec zmianie, ale od 2012 r. Nie wierzę, że widzimy inne zachowanie w przyszłości ( nadal jest w CSS4 ).

Przykład

Poniższy przykład doda tag języka do każdego cytatu na danej stronie przy użyciu pseudoklasy :langi pseudoelementu ::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

Pseudoklasy działają jako proste selektory w sekwencji selektorów i tym samym klasyfikują elementy według cech nie prezentacyjnych, pseudoelementy tworzą nowe elementy wirtualne.

Bibliografia

W3C

• Selektory Poziom 3
  • 4. Składnia selektora
  • 6.6 Pseudoklasy
  • 7. Pseudoelementy
• Specyfikacja CSS 2.1 (nieaktualna, ale wciąż zawiera informacje)
  • 5.2 Składnia selektora :

    Selektor prosty to selektor typu lub selektor uniwersalny, po którym bezpośrednio następuje zero lub więcej selektorów atrybutów, selektorów identyfikatora lub pseudoklas, w dowolnej kolejności. Prosty selektor pasuje, jeśli pasują wszystkie jego składniki.

  • 5.10 Pseudoelementy i pseudoklasy

Pseudoklasa filtruje istniejące elementy.
a:linkoznacza wszystko, <a>co jest :link.

Pseudoelement to nowy fałszywy element.
div::afteroznacza nieistniejące elementy po <div>s.

::selectionto kolejny przykład pseudoelementu.
Nie oznacza to wszystkich wybranych elementów; oznacza zakres wybranych treści, który może obejmować fragmenty wielu elementów.

Krótki opis, który pomógł mi zrozumieć różnicę:

• Pseudoklasy opisują specjalny stan.
• Pseudoelementy pasują do elementów wirtualnych.

Z dokumentów Sitepoint:

Pseudo-klasa jest podobna do klasy w HTML, ale nie jest to wyraźnie określone w znacznikach. Niektóre pseudoklasy są dynamiczne - są stosowane w wyniku interakcji użytkownika z dokumentem. - http://reference.sitepoint.com/css/pseudoclasses . To byłyby takie rzeczy :hover, :active, :visited.

Pseudoelementy pasują do elementów wirtualnych, które nie istnieją jawnie w drzewie dokumentu. Pseudoelementy mogą być dynamiczne, ponieważ elementy wirtualne, które reprezentują, mogą się zmieniać, na przykład przy zmianie szerokości okna przeglądarki. Mogą również reprezentować zawartość generowaną przez reguły CSS. - http://reference.sitepoint.com/css/pseudoelements . To byłyby takie rzeczy before, :after, :first-letter.

Poniżej znajduje się prosta odpowiedź:

Używamy pseudoklasy, gdy musimy zastosować css na podstawie stanu elementu. Jak na przykład:

1. Zastosuj css po najechaniu kursorem na element kotwicy ( :hover)
2. Zastosuj css, gdy zostanie zaznaczony element html ( :focus). itp.

Używamy pseudoelementu, gdy musimy zastosować css do określonych części elementów lub nowo wstawionej treści . Jak na przykład:

1. Zastosuj css do pierwszej litery lub pierwszego wiersza elementu ( ::first-letter)
2. Wstaw zawartość przed lub po zawartości elementu ( ::before, ::after)

Poniżej znajduje się przykład obu:

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

Koncepcyjna odpowiedź:

• Pseudoelement odnosi się do rzeczy, które są częścią dokumentu, ale jeszcze o tym nie wiesz. Na przykład pierwsza litera. Wcześniej miałeś tylko tekst. Masz teraz pierwszą literę, do której możesz skierować. To nowa koncepcja, ale zawsze była częścią dokumentu. Obejmuje to również takie rzeczy ::before; chociaż nie ma tam rzeczywistej treści, pojęcie czegoś, zanim coś innego było zawsze obecne - teraz to określasz.

• Pseudoklasa to stan czegoś w DOM. Tak jak klasa jest znacznikiem, który kojarzysz z elementem, tak pseudoklasa jest klasą, która jest kojarzona przez przeglądarkę, DOM lub cokolwiek innego, zwykle w odpowiedzi na zmianę stanu. Kiedy użytkownik odwiedza łącze - łącze to może przyjąć stan „odwiedzone”. Możesz sobie wyobrazić, że przeglądarka stosuje klasę „odwiedzone” do elementu Anchor. :visitedbyłby wtedy, jak wybierzesz dla tej pseudoklasy.

Pseudoklasa

Pseudoklasa to sposób wybierania pewnych części dokumentu HTML, oparty w zasadzie nie na samym drzewie dokumentu HTML i jego elementach lub cechach, takich jak nazwa, atrybuty lub zawartość, ale na innych warunkach fantomowych, takich jak kodowanie języka lub stan dynamiczny elementu.

Oryginalna pseudoklasa definiowała stany dynamiczne elementu, które są wprowadzane i wychodzące z upływem czasu lub w wyniku interwencji użytkownika. CSS2 rozszerzył tę koncepcję o wirtualne koncepcyjne komponenty dokumentu lub wywnioskowane części drzewa dokumentu, np. Pierwsze dziecko. Pseudoklasy działają tak, jakby klasy fantomowe zostały dodane do różnych elementów.

OGRANICZENIA: W przeciwieństwie do pseudoelementów, pseudoklasy mogą pojawiać się w dowolnym miejscu łańcucha selektorów.

Przykładowy kod pseudoklasy:

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

Strona, która demonstruje renderowanie powyższego kodu pseudoklasy

Pseudoelementy

PSEUDO-ELEMENTY służą do adresowania pod-części elementów. Pozwalają ustawić styl części zawartości elementu poza tym, co jest określone w dokumentach. Innymi słowy, pozwalają na zdefiniowanie elementów logicznych, które w rzeczywistości nie znajdują się w drzewie elementów dokumentu. Elementy logiczne umożliwiają adresowanie implikowanej struktury semantycznej w selektorach CSS.

OGRANICZENIA: Pseudoelementy mogą być stosowane tylko do kontekstów zewnętrznych i kontekstów na poziomie dokumentu - nie do stylów wbudowanych. Pseudoelementy są ograniczone w miejscu, w którym mogą wystąpić w regule. Mogą pojawić się tylko na końcu łańcucha selektorów (po temacie selektora). Powinny występować po nazwach klas lub identyfikatorów znalezionych w selektorze. Na selektor można określić tylko jeden pseudoelement. Aby zaadresować wiele pseudoelementów w strukturze pojedynczego elementu, należy wykonać wiele instrukcji selektora / deklaracji stylu.

Pseudoelementy mogą być używane do typowych efektów typograficznych, takich jak inicjały i inicjały. Mogą również odnosić się do wygenerowanej treści, której nie ma w dokumencie źródłowym (z „przed” i „po”). Poniżej znajduje się przykładowy arkusz stylów niektórych pseudoelementów z dodanymi właściwościami i wartościami.

/ * Poniższa reguła wybiera pierwszą literę nagłówka 1 i ustawia czcionkę na 2em, kursywą, z zielonym tłem. Pierwsza litera wybiera pierwszą renderowaną literę / znak dla elementu na poziomie bloku. * /

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

Źródła: Link

W skrócie, z pseudoklas na MDN:

Pseudoklasa CSS to słowo kluczowe dodawane do selektora, które określa specjalny stan wybranych elementów. Na przykład :hover może służyć do stosowania stylu, gdy użytkownik umieści wskaźnik myszy nad przyciskiem.

div: hover {
  kolor tła: # F89B4D;
}

A z pseudoelementów na MDN:

CSS Pseudoelement to słowo kluczowe dodawane do selektora, które umożliwia nadanie stylu określonej części wybranych elementów. Na przykład, ::first-linemoże służyć do stylizacji pierwszego wiersza akapitu.

/ * Pierwsza linia każdego elementu <p>. * /
p :: first-line {
 kolor niebieski;
 text-transform: wielkie litery;
}