Такі речі, як a:link і div::after...

Інформація про різницю здається мізерною.

Рекомендація CSS 3 щодо селектора досить чітко стосується обох, але я спробую все-таки показати відмінності.

Псевдокласи

Офіційний опис

Концепція псевдокласу введена для дозволу вибору на основі інформації, яка лежить поза деревом документів або яка не може бути виражена за допомогою інших простих селекторів.

Псевдо-клас завжди складається з "двокрапки" ( :), за якою слідує ім'я псевдо-класу і, необов'язково, значення між дужками.

Псевдокласи дозволені у всіх послідовностях простих селекторів, що містяться в селекторі. Псевдокласи дозволені в будь-якому місці послідовностей простих селекторів після селектора провідного типу або універсального селектора (можливо, опущений). Імена псевдокласів не враховують регістр. Деякі псевдокласи взаємовиключні, тоді як інші можуть застосовуватися одночасно до того самого елемента. Псевдокласи можуть бути динамічними, в тому сенсі, що елемент може набувати або втрачати псевдоклас під час взаємодії користувача з документом.

Джерело

Що це означає?

Важлива природа псевдокласів зазначена в самому першому реченні: "концепція псевдокласу [...] дозволяє відбір " . Це дозволяє автору таблиці стилів розрізняти елементи на основі інформації, яка "лежить поза деревом документа" , наприклад, поточного стану посилання ( :active, :visited). Вони не зберігаються ніде в DOM, і немає інтерфейсу DOM для доступу до цих параметрів.

З іншого боку, :targetдоступ до них здійснюється за допомогою маніпуляції DOM (ви можете скористатися window.location.hashдля пошуку об'єкта за допомогою JavaScript), але це "не можна виразити за допомогою інших простих селекторів" .

Отже, в основному псевдо-клас вдосконалює набір вибраних елементів як будь-який інший простий селектор у послідовності простих селекторів . Зверніть увагу, що всі прості селектори в послідовності простих селекторів будуть оцінюватися одночасно. Повний список псевдо-класу можна переглянути в рекомендації селектора CSS3.

Приклад

Наступний приклад забарвить усі парні рядки сірим кольором ( #ccc), усі нерівні рядки, які не можна поділити на 5 білих, а всі інші рядки - пурпуровими.

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

Псевдоелементи

Офіційний опис

Псевдоелементи створюють абстракції щодо дерева документів, крім визначених мовою документа. Наприклад, мови документів не пропонують механізмів доступу до першої літери або першого рядка вмісту елемента. Псевдоелементи дозволяють авторам посилатися на цю недоступну в іншому випадку інформацію. Псевдо-елементи можуть також надати авторам спосіб звернутися до вмісту , яке не існує в вихідному документі (наприклад, ::beforeі ::afterпсевдо-елементи дають доступ до генерируемому вмісту).

Псевдоелемент складається з двох двокрапок ( ::), за яким слідує назва псевдоелемента.

Це ::позначення введено в поточному документі для встановлення дискримінації між псевдокласами та псевдоелементами. Для сумісності з існуючими таблицями стилів користувацькі агенти повинні також прийняти попередню нотацію з двома двокрапками для псевдоелементів, введених в рівні CSS 1 та 2 (а саме: перший рядок,: перша буква,: перед та: після). Ця сумісність не допускається для нових псевдоелементів, представлених у цій специфікації.

На кожному селекторі може з'являтися лише один псевдоелемент, і якщо він присутній, він повинен з'являтися після послідовності простих селекторів, що представляє суб'єкти селектора.

Примітка: Майбутня версія цієї специфікації може дозволити кілька псевдоелементів на селектор.

Джерело

Що це означає?

Найголовніша частина тут полягає в тому, що "псевдоелементи дозволяють авторам посилатися на [..] недоступну інформацію ", і що вони "можуть також надавати авторам спосіб посилатися на вміст, який не існує у вихідному документі (наприклад, ::beforeі ::afterпсевдоелементи надають доступ до сформованого вмісту). ". Найбільша різниця полягає в тому, що вони насправді створюють новий віртуальний елемент, до якого можна застосувати правила і навіть селектори псевдокласу. Вони не фільтрують елементи, вони в основному фільтрують вміст ( ::first-line, ::first-letter) і обертають його у віртуальний контейнер, який автор може стилізувати, як хоче (ну, майже).

Наприклад, ::first-lineпсевдоелемент не можна реконструювати за допомогою JavaScript, оскільки він сильно залежить від поточного шрифту, розміру шрифту, ширини елементів, плаваючих елементів (і, можливо, часу доби). Ну, це не зовсім так: можна все-таки обчислити всі ці значення і витягти перший рядок, однак робити це дуже громіздка діяльність.

Я думаю, найбільша різниця полягає в тому, що "на селектор може з'являтися лише один псевдоелемент" . У примітці сказано, що це може бути змінено, але станом на 2012 рік я не вірю, що в майбутньому ми бачимо іншу поведінку ( це все ще в CSS4 ).

Приклад

Наступний приклад додасть тег мови до кожної лапки на даній сторінці за допомогою псевдокласу :langта псевдоелемента ::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

Псевдокласи діють як прості селектори в послідовності селекторів і тим самим класифікують елементи за непредставленими характеристиками, псевдоелементи створюють нові віртуальні елементи.

Список літератури

W3C

• Селектори 3 рівня
  • 4. Синтаксис селектора
  • 6.6 Псевдокласи
  • 7. Псевдоелементи
• Специфікація CSS 2.1 (застаріла, але все ще інформативна)
  • 5.2 Синтаксис селектора :

    Простий селектор - це або селектор типу, або універсальний селектор, за яким негайно ставлять нуль або більше селекторів атрибутів, селекторів ідентифікаторів або псевдокласів у будь-якому порядку. Простий селектор відповідає, якщо всі його компоненти збігаються.

  • 5.10 Псевдоелементи та псевдокласи

Псевдо-клас фільтрує існуючі елементи.
a:linkозначає всі <a>s, які є :link.

Псевдоелемент - це новий фальшивий елемент.
div::afterозначає неіснуючі елементи після <div>s.

::selectionє ще одним прикладом псевдоелемента.
Це не означає всі вибрані елементи; це означає вибраний діапазон вмісту, який може охоплювати частини багатьох елементів.

Короткий опис, який допоміг мені зрозуміти різницю:

• Псевдокласи описують особливий стан.
• Псевдоелементи відповідають віртуальним елементам.

З документів Sitepoint:

Псевдо-клас схожий на клас в HTML, але це явно не вказано в розмітці. Деякі псевдокласи є динамічними - вони застосовуються в результаті взаємодії користувача з документом. - http://reference.sitepoint.com/css/pseudoclasses . Це були б такі речі :hover, :active, :visited.

Псевдоелементи відповідають віртуальним елементам, які явно не існують у дереві документів. Псевдоелементи можуть бути динамічними, оскільки віртуальні елементи, які вони представляють, можуть змінюватися, наприклад, коли ширина вікна браузера змінюється. Вони також можуть представляти вміст, який генерується правилами CSS. - http://reference.sitepoint.com/css/pseudoelements . Це були б такі речі before, :after, :first-letter.

Нижче наведена проста відповідь:

Ми використовуємо псевдо-клас, коли нам потрібно застосувати css на основі стану елемента. Як от:

1. Застосувати css до наведення на якірний елемент ( :hover)
2. Застосовуйте css, коли фокус зосереджується на елементі html ( :focus). тощо

Ми використовуємо псевдоелемент, коли нам потрібно застосувати css до конкретних частин елементів або щойно вставленого вмісту . Як от:

1. Застосувати css до першої літери або першого рядка елемента ( ::first-letter)
2. Вставити вміст до або після вмісту елемента ( ::before, ::after)

Нижче наведено приклад обох:

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

Концептуальна відповідь:

• Псевдоелемент відноситься до речей, які є частиною документа, але ви просто ще цього не знаєте. Наприклад, перша буква. Раніше у вас був лише текст. Тепер у вас є перший лист, на який ви можете націлитись. Це нова концепція, але завжди була частиною документа. Сюди також входять такі речі, як ::before; хоча фактичного вмісту там немає, поняття чогось до чогось іншого було завжди - тепер ви вказуєте це.

• Псевдо-клас - це стан чогось у DOM. Подібно до того, як клас - це тег, який ви асоціюєте з елементом, псевдо-клас - це клас, який асоціюється браузером, DOM чи іншим способом, як правило, як відповідь на зміну стану. Коли користувач відвідує посилання - це посилання може набути стану "відвіданого". Ви можете собі уявити, як браузер застосовує клас "відвіданий" до елемента Anchor. :visitedтоді було б, як ви вибрали для цього псевдокласу.

Псевдоклас

Псевдо-клас - це спосіб виділення певних частин документа HTML, заснований в принципі не на самому дереві документа HTML та його елементах або на характеристиках, таких як ім'я, атрибути чи вміст, а на інших фантомних умовах, таких як кодування мови або динамічний стан елемента.

Вихідний псевдо-клас визначав динамічні стани елемента, які вводяться та виходять із часом або за допомогою втручання користувача. CSS2 розширив цю концепцію, включивши віртуальні концептуальні компоненти документа або виведені частини дерева документів, наприклад, перший дочірній матеріал. Псевдокласи працюють так, ніби фантомні класи були додані до різних елементів.

ОБМЕЖЕННЯ: На відміну від псевдоелементів, псевдокласи можуть з’являтися де завгодно в ланцюжку селектора.

Приклад коду псевдокласу:

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

Сторінка, яка демонструє візуалізацію вищевказаного коду псевдокласу

Псевдоелементи

PSEUDO-ELEMENTS використовуються для адресування підчастин елементів. Вони дозволяють встановити стиль для частини вмісту елемента за межами зазначеного в документах. Іншими словами, вони дозволяють визначати логічні елементи, яких насправді немає в дереві елементів документа. Логічні елементи дозволяють розглядати семантичну структуру, що передбачається, у селекторах CSS.

ОБМЕЖЕННЯ: Псевдоелементи можна застосовувати лише до зовнішнього контексту та на рівні документа, а не до вбудованих стилів. Псевдоелементи обмежені тим, де вони можуть з’являтися в правилі. Вони можуть з'являтися лише в кінці ланцюжка селектора (після теми селектора). Вони повинні з’являтися після будь-яких назв класів чи ідентифікаторів, знайдених у селекторі. Для кожного селектора можна вказати лише один псевдоелемент. Щоб звернутися до кількох псевдоелементів в одній структурі елементів, потрібно зробити декілька операторів селектора / оголошення.

Псевдоелементи можуть бути використані для загальних типографських ефектів, таких як початкові та пропускаючі. Вони також можуть звертатися до згенерованого вмісту, якого немає у вихідному документі (з "до" та "після"). Нижче наведено приклад таблиці стилів деяких псевдоелементів із доданими властивостями та значеннями.

/ * Наступне правило вибирає першу літеру заголовка 1 і встановлює шрифт 2em, скоропис, із зеленим фоном. Перша буква вибирає першу відтворену букву / символ для елемента рівня блоку. * /

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

Джерела: Посилання

Коротше, з псевдо-класів на MDN:

Псевдо-клас CSS - це ключове слово, додане до селектора, яке вказує особливий стан вибраних елементів. Наприклад, :hover може використовуватися для застосування стилю, коли користувач наводить курсор на кнопку.

div: hover {
  фон-колір: # F89B4D;
}

І з псевдоелементів на MDN:

Псевдоелемент CSS - це ключове слово, додане до селектора, що дозволяє стилізувати певну частину вибраних елементів. Наприклад, ::first-lineможе використовуватися для стилізації першого рядка абзацу.

/ * Перший рядок кожного елемента <p>. * /
p :: перший рядок {
 колір: синій;
 перетворення тексту: великі літери;
}