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




картинка псевдоэлементы (8)

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

Псевдо-класс - это выбор некоторых частей документа 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 */
}

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

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

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

Источники: Link

Вещи вроде a:link или div::after ...

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


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

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

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


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

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

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

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

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

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

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

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

Source

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

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

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

Примечание. Будущая версия этой спецификации может допускать множественные псевдоэлементы на селектор.

Source

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

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


Вкратце, из 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;
}

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

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

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


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

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

  1. Применить css при наведении на якорный элемент ( :hover )
  2. Примените css, когда сосредоточитесь на элементе html ( :focus ). и т.п.

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

Они не синонимы.

display:none удаляет элемент из обычного потока страницы, позволяя другим элементам заполняться.

visibility:hidden оставляет элемент в обычном потоке страницы, который все еще занимает пространство.

Представьте, что вы находитесь в очереди на прогулку в парке развлечений, и кто-то в очереди становится настолько шумным, что безопасность срывает их с линии. Затем все в строке переместится в одну позицию, чтобы заполнить теперь пустой слот. Это похоже на display:none .

Сравните это с подобной ситуацией, но что кто-то перед вами надевает плащ-невидимку. При просмотре строки это будет выглядеть как пустое пространство, но люди не могут заполнить это пустое пространство, потому что кто-то все еще там. Это похоже на visibility:hidden .





css css-selectors pseudo-class pseudo-element