Рекомендация селектор 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