В чем разница между псевдоклассом и псевдоэлементом в CSS?

Такие вещи, как a:link или div::after...

Информация о различии кажется скудной.

ОТВЕТЫ

Ответ 1

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

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

Официальное описание

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

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

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

Источник

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

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

С другой стороны, к :target можно получить доступ с помощью DOM-манипуляции (вы можете использовать window.location.hash для поиска объекта с помощью JavaScript), но это "не может быть выражено с помощью других простых селекторов".

Таким образом, в основном псевдокласс будет уточнять набор выбранных элементов как любой другой простой селектор в Источник

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

В документах Sitepoint:

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

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

Ответ 5

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

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

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

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

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

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

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

Источники: Ссылка

Ответ 6

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

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

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

Ответ 7

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

Мы используем псевдокласс, когда нам нужно применить css на основе состояния элемента.

Например:

  • Применить css при наведении элемента привязки
  • Применить css, когда вы фокусируетесь на элементе html. и др.

Мы используем псевдоэлемент, когда нам нужно применить css на основе определенных частей элементов.

Например:

  • Примените css, первую букву или строку элемента
  • Вставить содержимое до или после содержимого элемента

Ниже приведен пример обоих:

   <html>
<head>
<style>
p::first-letter {      //pseudo-element
    color: #ff0000;

}
a:hover {
    color: red;      //pseudo-class
}
</style>
</head>
<body>
<a href="#" >This is a link</a>
<p>This is First Line.</p>

</body>
</html>

Ответ 8

Вкратце, из Pseudo-classes в MDN:

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

div:hover {
  background-color: #F89B4D;
}

И из Pseudo-elements в MDN:

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

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