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