Такие вещи, как 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 (а именно: 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

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

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

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

Псевдокласс фильтрует существующие элементы.
a:linkозначает все, <a>что есть :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 или чем-то еще, обычно в ответ на изменение состояния. Когда пользователь переходит по ссылке, эта ссылка может принять состояние «посещено». Вы можете представить, как браузер применяет класс «посещенный» к элементу привязки. :visitedтогда будет то, как вы выберете этот псевдокласс.

Псевдо-класс

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

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

ОГРАНИЧЕНИЯ: в отличие от псевдоэлементов, псевдоклассы могут появляться где угодно в цепочке селекторов.

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

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, курсив, с зеленым фоном. Первая буква выбирает первую отображаемую букву / символ для элемента уровня блока. * /

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 :: first-line {
 цвет синий;
 текст-преобразование: прописные;
}