Рекомендация по выбору 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