рекомендация по селекторам 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 (а именно, :first-line, :first-letter, :before и :after). Эта совместимость не допускается для новых псевдоэлементов, представленных в этой спецификации.

Для каждого селектора может появиться только один псевдоэлемент, и если он присутствует, он должен появиться после последовательности простых селекторов, представляющих объекты селектора.

Примечание. В будущей версии этой спецификации может быть разрешено использование нескольких псевдоэлементов для одного селектора.

Источник

Что это значит?

Наиболее важной частью здесь является то, что "псевдоэлементы позволяют авторам ссылаться на [..] информацию, недоступную в противном случае", и что они "также могут предоставлять авторам способ ссылки на содержимое, которого нет в исходном документе (например, псевдоэлементы ::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

• Selectors Level 3
  • 4. Selector syntax
  • 6.6 Псевдоклассы
  • 7. Псевдоэлементы
• CSS 2.1 Specification (outdated but still informative)
  • 5.2 Selector syntax:

    Простой селектор — это либо селектор типа, либо универсальный селектор, за которым сразу следует ноль или более селекторов атрибутов, селекторов ID или псевдоклассов в любом порядке. Простой селектор соответствует, если совпадают все его компоненты.

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

Псевдокласс фильтрует существующие элементы.
a:link означает все <a>, равные :link.

Псевдоэлемент — это новый поддельный элемент.
div::after означает несуществующие элементы после <div>s.

::selection — еще один пример псевдоэлемента.
Это не означает, что выбраны все элементы; это означает диапазон выбранного контента, который может охватывать части нескольких элементов.

Краткое описание, которое помогло мне понять разницу:

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

Ниже приведен простой ответ:

Мы используем псевдокласс, когда нам нужно применить 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>

Из документов Sitepoint:

Псевдокласс похож на класс в HTML, но не указывается явно в разметке. Некоторые псевдоклассы являются динамическими — они применяются в результате взаимодействия пользователя с документом. - http://reference.sitepoint.com/css/псевдоклассы. Это могут быть такие вещи, как :hover, :active, :visited.

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

Концептуальный ответ:

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

• Псевдокласс — это состояние чего-то в DOM. Точно так же, как класс — это тег, который вы связываете с элементом, псевдокласс — это класс, который связывается браузером, DOM или чем-то еще, обычно в ответ на изменение состояния. Когда пользователь переходит по ссылке, эта ссылка может принимать состояние «посещено». Вы можете представить себе, как браузер применяет класс «visited» к элементу 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 */
}

Страница, демонстрирующая отрисовку приведенного выше кода псевдокласса.

Псевдоэлементы

ПСЕВДОЭЛЕМЕНТЫ используются для обращения к частям элементов. Они позволяют вам установить стиль для части содержимого элемента за пределами того, что указано в документах. Другими словами, они позволяют определять логические элементы, которых на самом деле нет в дереве элементов документа. Логические элементы позволяют обращаться к подразумеваемой семантической структуре в селекторах CSS.

ОГРАНИЧЕНИЯ: Псевдоэлементы могут применяться только к внешним контекстам и контекстам на уровне документа, но не к встроенным стилям. Псевдоэлементы ограничены в том, где они могут появляться в правиле. Они могут появляться только в конце цепочки селекторов (после темы селектора). Они должны идти после любых имен классов или идентификаторов, найденных в селекторе. Для каждого селектора может быть указан только один псевдоэлемент. Чтобы обратиться к нескольким псевдоэлементам в структуре одного элемента, необходимо сделать несколько операторов селектора/объявления стиля.

Псевдоэлементы можно использовать для обычных типографских эффектов, таких как начальные и буквицы. Они также могут обращаться к сгенерированному содержимому, которого нет в исходном документе (с «до» и «после»). Пример таблицы стилей некоторых псевдоэлементов с добавленными свойствами и значениями приведен ниже.

/* Следующее правило выбирает первую букву заголовка 1 и устанавливает шрифт 2em, курсив, с зеленым фоном. First-letter выбирает первую отображаемую букву/символ для блочного элемента. */

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 {
  background-color: #F89B4D;
}

И из псевдоэлементов на MDN:

CSS псевдоэлемент – это ключевое слово, добавляемое к селектору, которое позволяет задать стиль для определенной части выбранных элементов. Например, ::first-line можно стиль первой строки абзаца.

/* The first line of every <p> element. */
p::first-line {
 color: blue;
 text-transform: uppercase;
}