картинка - псевдоклассы и псевдоэлементы css




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

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

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


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


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

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

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

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

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


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

Мы используем 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>

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

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







pseudo-element