Как работать c before и after в css?

Опубликовано: 07.09.2023Рубрика: Компьютерные настройкиАвтор: Elena

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the <input> element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects <input> elements with a value within a specified range
:invalid	input:invalid	Selects all <input> elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with «it»
:last-child	p:last-child	Selects every <p> elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects <input> elements with no «required» attribute
:out-of-range	input:out-of-range	Selects <input> elements with a value outside a specified range
:read-only	input:read-only	Selects <input> elements with a «readonly» attribute specified
:read-write	input:read-write	Selects <input> elements with no «readonly» attribute
:required	input:required	Selects <input> elements with a «required» attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all <input> elements with a valid value
:visited	a:visited	Selects all visited links

❮ Previous
Next ❯

Предотвращение выделения текста

CSS можно использовать ещё и для того, чтобы сделать текст в элементе недоступным для выбора, т.е. запретить выделение текста.

Это плохая идея для основного текста, но будет полезно для элементов управления, которые можно быстро переключать или «гневно щелкать» в настольных браузерах, поскольку двойной щелчок вызывает выбор текста и подсветку его выделения – выглядеть немного странно и дико.

Проверить можно в следующей демонстрации

Обратите внимание, как переключатель слева становится подсвеченным при быстром нажатии, а переключатель справа – нет

See this code Preventing Text Highlights from Rage Clicking on x.xhtml.ru.

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

Что такое псевдоэлементы в CSS?

Сочетание двух слов – псевдо и элементы – часто может привести к недопониманию, поэтому давайте разберемся, что именно представляют собой псевдоэлементы в CSS (Каскадная таблица стилей).

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

И ответ – ДА. Это возможно с помощью псевдоэлементов. Псевдоэлементы – это компонент CSS, используемый для стилизации определенных частей веб-элемента. Эти псевдоэлементы можно использовать для применения CSS к части или определенной части веб-элемента, например:

Применение CSS к первой букве элемента
Применение CSS в первой строке элемента
Вставка некоторого текста перед текстом элемента
Вставка некоторого текста после текста элемента

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

selector::pseudo-element {
  property: value;
}

Распространенные типы псевдоэлементов в CSS

Прежде чем приступить к работе с псевдоэлементами в Selenium, давайте сначала рассмотрим некоторые часто используемые типы псевдоэлементов в CSS.

Псевдоэлемент::первой строки

Как следует из названия, псевдоэлемент::первой строки в CSS используется для добавления специального стиля CSS только в первую строку текста и может применяться только к элементам уровня блока.

Синтаксис:

selector::first-line {
  property: value;
}

Псевдоэлемент в примере CSS:::псевдоэлемент первой строки

Рассмотрим приведенный ниже HTML-код:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

{«mode»:»full»,»isActive»:false}

Если вы попытаетесь запустить приведенный выше HTML-файл, вывод будет:

Как вы можете видеть, желаемый зеленый цвет (#00ff00) применяется только к первой строке элемента , и это возможно только с помощью::псевдоэлемента первой строки.

Псевдоэлемент::из первой буквы

Как следует из названия, псевдоэлемент::первая буква в CSS используется для добавления специального стиля CSS только к первой букве текста и может применяться только к элементам уровня блока.

Синтаксис:

selector::first-letter {
  property: value;
}

Псевдоэлемент в примере CSS:::псевдоэлемент из первой буквы

Рассмотрим приведенный ниже HTML-код:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Если вы попытаетесь запустить приведенный выше HTML-файл, вывод будет:

Как вы можете видеть, желаемый зеленый цвет (#00ff00) применяется только к первой букве элемента и это возможно только с помощью::псевдоэлемента с первой буквой. и это возможно только с помощью::псевдоэлемента с первой буквой.

::перед псевдо-элементом

Как следует из названия, псевдоэлемент::before в CSS используется для добавления специального стиля CSS перед содержимым любого элемента.

Синтаксис:

selector::before {
  property: value;
}

Псевдоэлемент в примере CSS:::перед псевдоэлементом

Рассмотрим приведенный ниже HTML-код:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

{«mode»:»full»,»isActive»:false}

Если вы попытаетесь запустить приведенный выше HTML-файл, вывод будет:

Как вы можете видеть, желаемый символ поэтому (∴) применяется перед элементом , и это возможно только с помощью::перед псевдо-элементом.

::после псевдоэлемента

Как следует из названия, псевдоэлемент::after в CSS используется для добавления специального стиля CSS после содержимого любого элемента.

Синтаксис:

selector::after {
  property: value;
}

Псевдоэлемент в примере CSS:::после псевдоэлемента

Рассмотрим приведенный ниже HTML-код:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

{«mode»:»full»,»isActive»:false}

Если вы попытаетесь запустить приведенный выше HTML-файл, вывод будет:

Как вы можете видеть, желаемый символ поэтому (∴) применяется после элемента , и это возможно только с помощью::после псевдоэлемента.

Аналогично, в CSS доступно гораздо больше псевдоэлементов, таких как:

Псевдоэлемент::маркер

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

Синтаксис:

selector::marker {
  property: value;
}

Псевдоэлемент::выбор

Псевдоэлемент::selection в CSS используется для добавления специального стиля CSS к выбранной пользователем части или контенту.

Синтаксис:

selector::selection {
  property: value;
}

Conclusion

Congrats on making it to the end. As you have seen, the and pseudo-elements can be used in several ways to produce interesting animated effects that give life to our designs.

You can explore these further to create even more complex designs and animations, as there’s so much more that can be done using the and CSS pseudo-elements, and we have only just scratched the surface.

Is your frontend hogging your users’ CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.

CSS искусство

Под «CSS-искусством» я подразумеваю простые иконки, созданные с помощью CSS, а не иконки или шрифты. Это работает не для всех значков, которые могут быть в дизайне, но для шевронов, гамбургеров и значков поиска вы можете сохранить активы и передачу файлов и получить возможность изменять цвет, макет, размер или стиль значок на взаимодействиях или пользовательских триггеров.

Вы могли бы также сделать эти эффекты с SVG, но у этого есть больше проблем совместимости (в настоящее время) и может означать больше данных для загрузки пользователем, чтобы произвести тот же самый эффект.

Я создал несколько из них в Codepen и повторно использовал и настраивал их в нескольких проектах.

Анимированные иконки гамбургеров: codepen.io/wesruv/pen/pEOAJz
Кнопка закрытия codepen.io/wesruv/pen/pEOAJz
Иконка RSS- канала codepen.io/wesruv/pen/yOxEYj
Перетащите значок: codepen.io/wesruv/pen/oxVZmw
Кнопка поиска: codepen.io/wesruv/pen/ZBvvVK

Я также недавно делал довольно витиеватую инфографику, используя эти методы, хотя это достаточно трудоемко, содержание в них должно быть доступно и оптимизировано для SEO, и, поскольку текст может измениться, мне нужно, чтобы контейнеры были гибкими и на основании копии.

СТЕК ИСКУССТВЕННОГО ИНТЕЛЛЕКТА

Интерактивная графика предназначена для объяснения различных технологий и планирования, которые должны входить в искусственный интеллект.

ДИАГРАММА ДРУЗЕЙ

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

СВЯЗАННЫЕ КРУГИ

То, что в итоге заменило диаграмму Венна, объясняет, каким образом компания или частное лицо может стать партнером Школы компьютерных наук Карнеги-Меллона.

Небольшой трюк, который я выучил — на более богато украшенном CSS Art, в котором есть небольшие части, которые нужно встретить, — я обычно добавляю div, чтобы содержать элемент. Я сделаю иконку намного больше, чем мне нужно, и использую в div, чтобы уменьшить ее до соответствующего размера. Это позволяет избежать проблем округления субпикселей, из-за которых значок выглядит не так.

Например, на маленьком значке с увеличительным стеклом может быть очень трудно выровнять ручку (диагональная линия) с линзой (кольцом), если значок широкий. Округление пикселей может привести к тому, что ручка прокалывает круг, или может не совпадать с кругом в правильном положении. Работая больше, шире, а затем сжимаясь, масштабируя до , мы избегаем этой проблемы.

Селекторы по псевдо-классам

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

Если псевдокласс следует сразу за другим селектором (например, a:link), он будет применен только к целевому селектору. Если между селектором и псевдоклассом есть пробел (a :link), то это два селектора, разделенных комбинатором потомства.

Ниже приведен список наиболее распространенных псевдоклассов и их краткое описание:

– стилизует непосещенные ссылки.
– стилизует посещенные ссылки, с некоторыми ограничениями из-за конфиденциальности.
– стилизует часть документа на основе фрагмента документа в URL, подобно тому, как это делается на Википедии со сносками.
– стилизует корневой элемент документа, обычно элемент <html>.
– позволяет выбирать конкретные элементы с помощью математических обозначений или ключевых слов (odd и even), часто используется для создания зебровых полос с помощью CSS.
– выбирает первый дочерний элемент родительского элемента.
– выбирает последний дочерний элемент родительского элемента.
– позволяет выбирать конкретные элементы с помощью математических обозначений и ключевых слов (odd и even) среди группы.
– стилизует элементы, на которые наведен курсор мыши.
– выбирает элемент, который в настоящее время “активирован”, обычно посредством щелчка мыши.
– соответствует элементу, который в данный момент имеет фокус, обычно посредством клавиатуры или щелчка мыши.
– выбирает любые отключенные элементы (например, элементы формы, радиокнопки и т.д.).
– выбирает переключатели и флажки в состоянии “выбран” или “отмечен”.
– выбирает элементы формы, для которых установлен атрибут “required”.

Что такое псевдоэлемент и его назначение

Псевдоэлемент — это дополнение к селектору, с помощью которого можно стилизовать элемент, не определённый в структуре HTML документа. Добавляется он к селектору c помощью символов , т.е. так .

Но нотация с двумя двоеточиями появилась только в CSS3. Это было сделано для того, чтобы в CSS коде можно было очень просто отличить псевдоэлементы от псевдоклассов. До CSS3 псевдоэлементы определялись так же, как и псевдоклассы, т.е. с помощью одного двоеточия. Все современные браузеры принимают для определения псевдоэлементов как одно двоеточие, так и два.

Но если проект не требует поддержку браузера Internet Explorer 8, то рекомендуется в CSS коде для определения псевдоэлементов писать два двоеточия. В противном случае необходимо использовать одно двоеточие, т.к. Internet Explorer 8 не поддерживает запись с .

Обратите внимание, что псевдоэлементы не добавляются в DOM. Поэтому получить псевдоэлемент с помощью JavaScript и с использованием библиотеки jQuery нельзя. Псевдоэлементы применяются на сайте только в оформительских целях, т.е

для добавления к элементам определённых дизайнерских решений. С помощью них не рекомендуется добавлять на сайт важную информацию. Если этих элементов нет в DOM, то к ним нельзя добавить обработчики событий или каким-то другим образом взаимодействовать с ними через JavaScript

Псевдоэлементы применяются на сайте только в оформительских целях, т.е. для добавления к элементам определённых дизайнерских решений. С помощью них не рекомендуется добавлять на сайт важную информацию. Если этих элементов нет в DOM, то к ним нельзя добавить обработчики событий или каким-то другим образом взаимодействовать с ними через JavaScript.

Список псевдоэлементов:

Accessibility

It’s worth talking about how is conveyed by screen readers. According to the W3C spec, is .

Alright, sounds good. But let’s take a closer look at what happens in various cases.

If you’re using or for decorative purposes and have set to (empty string), then screen readers won’t announce them. This is fine!

Screen readers will read text put into . This wasn’t always the case, but it is now… unless you’re still supporting IE11 (sorry). Other folks have shared their results of testing various browser + screen reader combinations here, here, and here. That last one looks bad at first, until you realize all the failures come from IE11 and Firefox 29 (released 2014).

Remember that emojis and symbols count as text. Screen readers will announce them, which can be fine, but can also be awkward if you’re using them as decoration.

Screen readers can recognize images in . In my testing, VoiceOver would announce “image” in Firefox and Safari, and “unlabelled image” in Chrome.

If the image is not decorative, then we’re in a bad spot. We have a meaningful image that is only conveyed as “image”.

If the image is decorative, then someone using a screen reader may not be missing anything important, but they don’t know that! They’ll hear “image” and wonder what they’re missing out on.

The good news is that you can specify alternative text for . This gives us a way to tell screen readers what to announce, similar to setting the attribute on .

It also works with text, so we can tell screen readers how to announce decorative emojis and symbols.

The bad news is that Firefox and Safari do not support alternative text for . In fact, the will invalidate entirely in these browsers. You can work around this by declaring twice. Order is important!

You should also know that text in is unselectable and unsearchable, and images in cannot be right-clicked to get the image context menu. Not a big deal for trivial or decorative things, but I would reconsider before putting lengthy text or important images in .

Creating an animated button using CSS pseudo-elements

For our first project, we’ll start by creating a simple animated button to get a feel for using pseudo-elements to animate. Then, we’ll move on to the more complicated project.

Here is a Codepen of what we will be going through:

See the Pen
animated button by David Herbert (@davehert)
on CodePen.

We’ll start by creating an anchor tag in our HTML mockup that we’ll later style to a button:

<a href="#" class="btn">Hover Me</a>

Here’s our output:

Let’s jump to our CSS file and style this link to look like a typical button:

.btn {
  text-decoration: none;
  border: 2px solid #764abc;
  color: #764abc;
  padding: 10px 20px;
  border-radius: 25px;
    transition: all 1s;
  position: relative;
}

The code should be self-explanatory. We’ve removed the default underline decoration, added a solid border of , and made the color of the button the same as the text. We also added padding to put some space between the text and the border and added a border radius to curve the edges of the button.

Lastly, we added a transition for all properties for a duration of second. For example, any change that occurs to this button should occur smoothly and animate within a second — and set the position to because we intend to put a pseudo-element inside this button.

Remember when I mentioned that to position a child element with absolute position, the parent container has to be set to ? Well, this button will be the parent container. Below is our output:

Now, we are going to create a pseudo-element of this button:

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #764abc;
  transition: all 1s;
}

You must specify the property for a pseudo-element. Otherwise, it will not be shown. We’ve set to an empty string to satisfy this; we do not want any text for our pseudo-element. We set its position to , which removes it from its normal flow (making it overlap the button), and then set the coordinates for and to . This pins the empty pseudo-element to the button at those exact locations.

Afterward, we set the width and height to be exactly 100 percent of the parent, making it the same size as the button itself.

Lastly, we made the pseudo-element’s background the same color as the button and added a transition of second. Below is the output:

As you can see, the pseudo-element overlaps the button because we’ve used an position.

To resolve this, we have to use the property to change their stacking context by pulling the pseudo-element behind the button using a negative value. Then, we use the transform function to position the pseudo-element along the horizontal axis. Providing a value of positions the pseudo-element adjacent to the element, exactly flush on the left-hand side:

.btn::before {
  /*...previous code */
  z-index: -1;
  transform: translateX(-100%);
}

Et voilà:

.btn:hover::before {
  transform: translateX(0);
}

In the code above, we are basically saying that when someone hovers over this button, this pseudo-element should move back to its initial absolute position. Here’s our output:

However, the text is still hidden because the text and the pseudo-element are both the same color. Let’s change the color of the text to display in white when the button is hovered over:

.btn:hover {
  color: #fff;
}

Because we added a property to the button itself, this change will occur smoothly.

For the last step, we will apply an property to the button to hide any element that overflows from the container. When applied to the button, it will hide the translated pseudo-element and only show it when it moves back to position:

.btn {
  /*...previous code. */
  overflow: hidden;
}

Finally, we center the button on the page by making the body a CSS grid container and using the property:

body {
  /* other styles */
  display: grid;
  place-items: center;
}

Final output:

There you have it! We’ve successfully created a beautifully animated button using CSS pseudo-elements.

Немного особенностей

Есть еще одна декларация , которая должна ограничивать выделение текста внутри элемента, как это работает с . Однако, IE11 был последним браузером, который поддерживал это. В настоящее время значение не поддерживают все современные браузеры.

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

Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.

Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.

Pseudo-Elements vs. Pseudo-Classes

There are besides and that are used to style parts of existing elements. We talked about earlier, for styling list item markers. Another example is , which is used to .

There are also pseudo-classes, which are different than pseudo-elements. Pseudo-classes apply styles based on state. For example, we used in an earlier demo to apply a style only when a checkbox was checked.

Pseudo-elements are prefixed with double colons () while pseudo-classes are prefixed with a single colon (). Older versions of the W3C spec used single colons for pseudo-elements, so you might see and occasionally. They still work, but it is recommended to use instead.

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

И псевдоклассы, и псевдоэлементы были с самого начала CSS, с CSS1 (в этом году !). И там же было такое пояснение различия между ними:

Потом пришел CSS2, а за ним и CSS2.1. В июне 2011-го он с горем пополам стал стандартом, а в сентябре того же 2011-го стандартом стал модуль селекторов 3 уровня (и формально по сей день стандарт). Именно в нем у псевдоэлементов появилось двойное двоеточие. За это время приходили и уходили другие спецификации, от «вечного кандидата в рекомендации» до совсем чернового предложения от Adobe, и все они норовили прибавить что-то своё. А еще HTML5 со своими интерактивными новинками…

Но то отличие в главном по-прежнему актуально.

Любой псевдокласс соответствует какому-то элементу. Или в каком-то определенном состоянии, после каких-то действий пользователя (под фокусом, при наведении), или в каком-то определенном месте DOM-дерева (пятый в ряду, третий с конца…), или отвечает каким-то дополнительным условиям (напр. не является заголовком) — если некий элемент вдруг оказался в этом состоянии/в этом месте/с такими параметрами, к нему применится соответствующий псевдокласс. Само название указывает, что они — некое подобие классов. Как и классы, псевдоклассы можно комбинировать в каких угодно сочетаниях. У одного элемента их может быть сколько угодно (например, , причем в любом порядке.

Действующий стандарт выделяет , по не всегда понятной логике (чем :target не динамический?). В идущем ему на смену черновике CSS Selectors 4 классификацию чуть обновили:

языковые (, )
псевдоклассы места (все ссылочные и )
действия пользователя (, , …)
временные (в теории, помогут подсветить элементы по мере озвучки их скринридером, показать субтитры для видео в нужный для них момент и т.п.)
состояния ввода (, …)
структурные (, , …)
новые псевдоклассы для выбора элементов по колонке таблицы или грида.
функциональные псевдоклассы для комбинации других селекторов (, и — только б не спугнуть! — долгожданный ).

А вот псевдоэлементы — судя по названию же, лишь отдаленное подобие элементов. Они выбирают что угодно: букву, фрагмент текста с другими элементами внутри, кнопку в составном поле ввода или вообще что-то, чего и близко не было в исходном документе — только не реальный DOM-элемент. Но это непонятное что-то получит визуальное представление и займет достойное место в , а затем и на экране, наравне с настоящими элементами.

У элемента, которого нет, по идее, не может быть и соседей, тем более потомков. Поэтому в действующем стандарте (в вольном переводе):

Именно поэтому мы привыкли видеть псевдоэлементы в селекторах последними. Правда, в том же стандарте прячется осторожная оговорка, что это, возможно, не навсегда… но не будем забегать вперед.

Какие есть псевдоэлементы? Само собой, и . Чуть менее известны (хотя еще старше и работали даже в IE5!) и . Эти 4 псевдоэлемента были в CSS2 (что дает им почетное право писаться с одним двоеточием). Удивительно, но в действующем стандарте и описаны! Лишь еще вскользь упомянут. Всё пёстрое богатство разнобраузерной «псевдофауны», что мы знаем по подборкам наподобие этой, стандарт словно игнорирует.

Относительно недавно обновился черновик нового отдельного модуля псевдоэлементов 4 уровня, в котором их чуть больше и вдобавок они логически сгруппированы:

текстовые эффекты ()
генерируемый контент (, , ::placeholder и ::marker)
средства для выделения и подсветки — и его друзья.

Но здесь самое время остановиться и перейти от истории и теории к практике главной темы этой статьи — отношений псевдоэлементов с псевдоклассами и друг с другом:). Начнем с самого простого!

Заключение. Селекторы CSS.

В заключении, мы рассмотрели различные типы селекторов CSS и их применение. От простых селекторов, включающих один элемент, до сложных селекторов, использующих комбинаторы для сочетания нескольких селекторов. Мы также узнали о псевдоэлементах, которые могут использоваться для создания виртуальных элементов на странице.

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

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

css html

Добавить комментарий

Полное руководство по псевдоклассам и псевдоэлементам

Опубликовано: 07.09.2023Рубрика: Компьютерные настройкиАвтор: Elena

Content Replacement

As you’ve noticed by now, and depend on . They won’t even render unless is set. But the dependency isn’t reciprocal — there are situations where can be used without or .

If is set to a single image only, then you can use it directly on an element to replace the HTML contents of that element.

Let’s try it out on the following HTML.

The HTML is testing 3 cases.

An element with simple text. It’ll be replaced.
An element with inside of it. It’ll also be replaced.
An element directly. Firefox will not replace it, but other browsers will.

See for yourself!

See the Pen Content Replacement by Will Boyd (@lonekorean) on CodePen.

To clarify, everything inside the element is replaced. So you could replace an entire page with a chicken nugget by doing something like this.

Please use this power responsibly.

Working with Quotes

Let’s get back to setting on and to something other than an empty string, because there’s some interesting stuff you can do there.

can be set to the special values and . Doing so will insert open/close quotes appropriate for the current language. Styling is a good use case for this.

Now we have automatic stylish quotes for .

See the Pen Stylish Blockquotes by Will Boyd (@lonekorean) on CodePen.

Unlike , the tag (inline quotation) shows quotation marks by default. This isn’t magic — it’s your browser’s default user agent stylesheet doing the same thing we just did!

Another cool thing about and is that they are nesting-aware. As an example, for English, if you have nested tags, the outer one will use and while the inner one will use and .

The CSS property gives you direct control over what is used for and .

Let’s wrap up this section with a demo of in action.

See the Pen Open/Close Quotation Marks by Will Boyd (@lonekorean) on CodePen.

Each quote has the same markup.

But with different values.

:first-letter

Определяет стиль первого символа в тексте элемента, к которому добавляется.
Это позволяет создавать в тексте буквицу и выступающий инициал.

Буквица представляет собой увеличенную первую букву, базовая линия которой
ниже на одну или несколько строк базовой линии основного текста.

Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает
с базовой линией основного текста.

Рассмотрим пример создания выступающего инициала. Для этого требуется добавить
к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и
поменять цвет текста (пример 16.3).

Пример 16.3. Использование :first-letter

Результат примера показан ниже (рис. 16.3).

Рис. 16.3. Создание выступающего инициала

В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца
текста.

Например: блестящая кнопка

В этом примере мы используем псевдоэлемент для создания эффекта сияния при наведении мыши на кнопку. Вот пример этого в действии (наведите или нажмите, чтобы увидеть эффект).

С момента использования псевдоэлементов нам не нужно больше HTML, чем то что есть, чтобы получить движение. Вы можете захотеть добавить класс к кнопке, если стилизовать необходимо более одного типа на странице, но сейчас мы будем использовать общий элемент для упрощения.

Добавляем эффект блеска

Эффект яркого блеска представляет собой линейный градиент, который проходит через кнопку. Чтобы создать это мы используем псевдоэлемент after и первоначальное положение будет вне кнопки:

Эффект блеска состоит из градиента от цвета кнопки до белого и обратно. На данном этапе эффект находится за пределами кнопки.

Нам нужно скрыть слой с блеском так, чтобы он показывался только при наведении курсора мыши. Для этого используем свойство overflow со значением hidden . Поскольку псевдоэлемент находится внутри кнопки, это означает, что это позиционирование вне ее предела и его не будет видно.

Я поместил некоторые другие стили кнопке, что придаст ей собственный вид. Единственное, что следует отметить, то это применение position: relative . Я добавил это свойство для абсолютного позиционирования псевдоэлемента и это будет находиться внутри кнопки. Указания позиции: абсолютно размещенный элемент будет находиться в пределах родительского элемента.

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

С CSS мы можем задать псевдоэлемент используя ::before или ::after . Псевдоэлемент находится внутри вашего элемента, между элементом и любым содержимым. Так как он действует как элемент самостоятельно, то может быть стилизованым, позиционируемым и многое другое. Код выглядит приблизительно вот так:

На этой стадии наш элемент .pebble имеет два присоединенных виртуальных элемента и мы можем стилизовать их по мере необходимости.

Обратите внимание на «::» вместо «:»

Обычно мы используем двойное двоеточие :: для обозначения псевдоэлементов (в отличие от псевдоклассов, как :hover, :first-child). Если хотите поддержку IE8, то лучше заменить на одиночный : . Другие браузеры и новые версии IE поддержуют двойные.

Не забудьте о «content»

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

Это дает убедиться, что элемент виден на экране.

:dir (эксперимент)

ПК :dir нацелен на элемент, направление которого указывается в документе. Другими словами для того чтобы ПК :dir работал в разметке у соответствующего html-элемента должен быть установлен атрибут dir.

В настоящий момент доступны два значения для направления: ltr (слева направо) и rtl (справа налево).

На момент написания статьи только Firefox (с вендорным префиксом -moz-dir()) поддерживает ПК :dir. Очень похоже, что скоро это изменится. Поэтому в примере показаны оба варианта — с префиксом и без.

Заметка: Объединение в одном правиле версии с префиксом и без работать не будет. Нужно создать два отдельных правила.

Пример: параграф написан на арабском языке (направление текста справа налево). Текст будет оранжевого цвета.

HTML:

<article dir="rtl">    <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p></article>

CSS:

/* prefixed */article :-moz-dir(rtl) {    color: orange;}/* unprefixed */article :dir(rtl) {    color: orange;}

Параграф ниже написан на английском (слева направо). Текст будет синим.

HTML:

<article dir="ltr">    <p>If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p></article>

CSS:

/* prefixed */article :-moz-dir(ltr) {    color: blue;}/* unprefixed */article :dir(ltr) {    color: blue;}

Demo:

Inserting Non-Text Content

I mentioned briefly that you can leave the property’s value as an empty string or insert text content. You basically have two additional options of what to include as the value of the property.

First, you can include a URL that points to an image, just as you would do when including a background image in the CSS:

Notice that the quotes are missing. If you wrapped the URL reference in quotes, then it would become a literal string and insert the text “url(image.jpg)” as the content, instead of inserting the image itself.

Naturally, you could include a Data URI in place of the image reference, just as you can with a CSS background.

You also have the option to include a function in the form of . This function, , “returns as a string the value of attribute X for the subject of the selector.”

Here’s an example:

What does the function do? It takes the value of the specified attribute and places it as text content to be inserted as a pseudo-element.

The code above would cause the value of every element on the page to be placed immediately after each respective element. This could be used in a print style sheet to include full URLs next to all links when a document is printed.

You could also use this function to grab the value of an element’s attribute, or even microdata values. Of course, not all of these examples would be practical in and of themselves; but depending on the situation, a specific attribute value could be practical as a pseudo-element.

While being able to grab the or text of an image and display it on the page as a pseudo-element would be practical, this isn’t possible. Remember that the pseudo-element must be a child of the element to which it is being applied. Images, which are (or empty) elements, don’t have child elements, so it wouldn’t work in this case. The same would apply to other void elements, such as .

CSS искусство

Я создал несколько из них в Codepen и повторно использовал и настраивал их в нескольких проектах.

Анимированные иконки гамбургеров: codepen.io/wesruv/pen/pEOAJz
Кнопка закрытия codepen.io/wesruv/pen/pEOAJz
Иконка RSS- канала codepen.io/wesruv/pen/yOxEYj
Перетащите значок: codepen.io/wesruv/pen/oxVZmw
Кнопка поиска: codepen.io/wesruv/pen/ZBvvVK

СТЕК ИСКУССТВЕННОГО ИНТЕЛЛЕКТА

ДИАГРАММА ДРУЗЕЙ

СВЯЗАННЫЕ КРУГИ

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

Из «незначительного» изменения грамматики CSS, что псевдоэлементы могут быть не только на конце цепочки селекторов, есть и менее очевидные следствия. Как вы думаете, какого цвета будет в результате такого кода?

div, div::after {
  width: 200px;
  height: 200px;
  background: red;
}
div.test, div::after.test{
  background: green;
}

Такой код может случайно получиться на выходе препроцессора, как в этом примере. Должно ли примениться правило с зеленым фоном?

Современные браузеры считают, что нет. За исключением Safari 9+ (и iOS 9.3+ Safari) — те радостно красят квадрат зеленым. В браузерах на основе Chromium, где-то в районе 48-й версии, он тоже был зеленым, но с 49-й версии квадрат снова «покраснел». Баг исправили?

Не всё так однозначно.

По всем предыдущим стандартам — до действующего модуля селекторов 3 уровня включительно — этот селектор был недопустимым. Даже если запрет выражался лишь в текстовом примечании к формальной грамматике, браузеры вынуждены были его соблюдать. По правилам обработки ошибок в CSS, невалидность селекторов «заразна»: если в списке селекторов затесался хоть один невалидный — отбрасывается всё правило целиком. Именно на этом держатся хаки с дописыванием перед селектором через запятую чего-то вроде или , чтобы правило отработало только в каком-то одном браузере.

Но что, если это текстовое примечание уберут и псевдоэлементу разрешат быть не последним в цепочке?

Конечно, селектор не начнет что-либо выбирать, он останется таким же бессмысленным. Но бессмысленный — не значит недопустимый. Селектор , например, явно бессмысленный и ничего не выбирает — но зато и не нарушает никаких формальных правил, а значит, и не «заражает» невалидностью целое правило. Т.е. правило полностью работоспособно. А значит, и наше странное правило может стать таким же.

То, что поведение Safari 9 — не баг, косвенно подтвержается тем, что именно Safari 9 поддерживает больше всего нововведений черновика селекторов 4 уровня. А значит, живет уже по новому стандарту. Опять же — стандарт еще не утвержден, так что всё может измениться. Но полезно знать, что такие перемены в принципе бывают. Особенно при использовании хаков с неочевидным принципом действия: вчерашний баг вполне может обернуться завтрашней фичей, и хак перестанет работать!

Добавлено 2.01.2018: буквально в новогоднюю ночь Элика Этемад (fantasai) грамматику CSS-селекторов, и классы для псевдоэлементов однозначно стали недопустимыми. По новой грамматике поведение Safari будет считаться багом, и вскоре его могут пофиксить. Но пока старые версии еще в ходу, стоит быть в курсе этого разночтения!

Причина:

Эта статья возникла в сообществе OSC, кто-то спросил, как использовать jq для получения псевдоэлементов. Моя первая мысль заключается в том, что мощный CSS-запрос должен иметь возможность получать псевдоэлементы.

Однако на самом деле CSS Query не может. То есть мы не можем получить псевдоэлемент: before через $ («: before»), $ (dom) .find («: before») или document.querySelector («: before»).

По этой причине мне нужно заново понять псевдоэлементы (псевдоэлементы). Почему вы не можете использовать JS для прямого получения псевдоэлементов?

Например, псевдоэлементы :: before и :: after используются для вставки содержимого в начало или конец элемента при визуализации CSS.Они не ограничены документом и не влияют на сам документ, а только на окончательный стиль. Этот добавленный контент не будет отображаться в DOM, а только добавлен в слой рендеринга CSS.

По факту,Псевдоэлементы могут отображаться браузером, но сами они не являются элементами DOM. Его нет в документе, поэтому JS не может напрямую управлять им.А селекторы jQuery основаны на элементах DOM, поэтому псевдоэлементы нельзя манипулировать напрямую.

Как управлять стилем псевдоэлемента?

По этой причине я решил резюмировать методы управления псевдоэлементами JS, чтобы облегчить их использование в будущем.

::before и ::after пустых и замещаемых элементов

Еще одна загадка CSS, над которой давно ломают головы даже знатоки. Казалось бы, раз ::before и ::after добавляются перед и после контента элемента, то для всех пустых элементов (у которых ) они работать не должны: нет контента — нет и мест для вставки. Но практика часто показывает иное. Может, верна , что псевдоэлементы не работают только для замещаемых элементов? Но почему тогда во многих браузерах работают псевдоэлементы для <img> — уж он-то однозначно замещаемый?

Кстати, что такое эти замещаемые элементы, которые даже визуально форматируются ? Удивительно, но однозначного определения в CSS до сих пор нет!

Изначально () их определяли как «элемент, заменяемый контентом, на который из него указывается». Затем () — как «элемент, для которого движок CSS-форматирования знает лишь внутренние размеры» (именно тогда к замещаемым элементам стали относить поля форм). Наконец, в — который до последнего времени был актуальным стандартом — как «элемент, чей контент не рассматривается моделью форматирования CSS» (рассматривает ли она контент тех же <button> и <textarea>, который, вроде бы, вполне слушается как минимум CSS для шрифта — спецификация не уточняла).

Так что, видимо, искать глубокую закономерность тут незачем. Всё определяется тем, как эти элементы реализованы в браузерах — т.е. «как исторически сложилось». А сложилось так, что большинство браузеров всё равно замещает такие элементы… вопрос лишь, чем именно:)

Возьмем для примера пару картинок из вышеупомянутой статьи и рассмотрим их в отладчике Хрома, включив галочку «Показывать теневую DOM браузера»:

Но (2003 г.) было еще одно определение замещаемого: «элемент или псевдоэлемент, у которого вычисленное значение используемой части свойства contentоказывается отдельным URI». А это свойство можно было задавать всем элементам. Т.е. силами самого CSS по сути можно было сделать любой элемент замещаемым или незамещаемым! И там же впервые явно утверждалось, что у замещаемых элементов нет ::before и ::after (в других спецификациях их поведение было лишь «не определено»).

Похоже, когда-то давно в некоторых браузерах (Opera Presto и WebKit) это даже частично поддерживалось. Потом браузеры стали от этого избавляться. Если в iOS 9.2 Safari указание свойства content для <img> еще влияло на отображение псевдоэлементов для картинки, то уже в iOS 9.3 — перестало. И вот недавно этот модуль спецификации обновился — с той же самой формулировкой! Правда, возможности самого свойства content урезали: если сделать незамещаемый элемент замещаемым (заменить картинкой) можно, то наоборот — уже нельзя. Так что возвращать убранное браузерам не придется.

И еще курьезный факт — собственные запреты не мешают самому W3C в собственных спецификациях стилизовать «отбивку» <hr> вот так:

See the Pen LZVvmy by Ilya Streltsyn (@SelenIT) on CodePen.

Это работает во всех актуальных браузерах.

Что такое псевдоэлемент и его назначение

Список псевдоэлементов:

:nth-child

ПК :nth-child выбирает один или более элементов в зависимости от их позиции в разметке.

Этот ПК является одним из самых универсальных и мощных вCSS.

Все :nth ПК принимают аргументы, которые представлены формулой в круглых скобках. Формула может быть одним числом, формулой со структурой an+b или словами odd(нечетный)/even(четный).

В формулах типа an+b:

a является числом (именуется целым числом);
n это буква n (другими словами мы действительно пишем букву n в формуле);
+ это оператор который может быть как плюсом (+) так и минусом (-);
b представляет собой целое число, как правило, но используется только там где необходим.

Используем греческий алфавит. Ниже есть несколько примеров, использующих одну HTML структуру:

<ol>    <li>Alpha</li>    <li>Beta</li>    <li>Gamma</li>    <li>Delta</li>    <li>Epsilon</li>    <li>Zeta</li>    <li>Eta</li>    <li>Theta</li>    <li>Iota</li>    <li>Kappa</li></ol>

CSS:

Давайте выберем второго ребенка. В этом случае только “Beta” будет оранжевой:

ol :nth-child(2) {    color: orange;}

Теперь выберем других детей, начиная со второго ребенка. И так, “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa” будут оранжевыми:

ol :nth-child(2n) {    color: orange;}

Выберем все четные дочерние элементы в списке:

ol :nth-child(even) {    color: orange;}

Давайте выберем каждого второго ребенка начиная с шестого. “Zeta,” “Theta” и “Kappa” будут оранжевыми:

ol :nth-child(2n+6) {    color: orange;}

Demo:

Building an advanced animated profile card using multiple pseudo-elements

Now, for the main event, we’ll create a more complex animated profile card using multiple pseudo-elements — four, to be exact — to create a truly stunning hover effect.

Here is a Codepen of what we’ll go through:

See the Pen
Animated Profile Card by David Herbert (@davehert)
on CodePen.

Without further ado, let’s get right into the HTML markup:

<div class="profile-card">
      <div class="info">
        <h2>John Doe</h2>
        <p>Ceo / Founder</p>
      </div>
</div>

We’ve created a simple card that holds the user’s bio (consisting of name and position):

Let’s jump to the CSS file and style this card:

.profile-card {
  width: 300px;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  position: relative;
  background: url("/image.jpg") no-repeat center center/cover;
}

We’ve created a fixed card, placed the content inside at the center using CSS , and added a to give the edges a bit of shadow, so it looks more realistic. Lastly, we set the card as to make it a parent container for the pseudo-elements and added a centered background image. Let’s see our output:

This is the tricky part. We intend to use four pseudo-elements, but an element can only have one and one pseudo-element, respectively. To get around this, we’ll be using the card itself to create two pseudo-elements. Then, we’ll place another inside it with the that we will use to create another two pseudo-elements, which wrap the content.

Let’s begin with the :

.info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #764abc;
  transform: skew(30deg) translateX(100%);
  opacity: 0.3;
  z-index: -1;
  transition: all 0.6s ease;
}

Now, because the itself has no fixed width or height, the pseudo-element takes the full width and height of the parent card, making it the same size as the card.

We then create a slanted appearance using the transformation, and then use transformation to move it to the right of the card. The negative ensures it stays behind the text while giving a value of gives it a partially transparent appearance:

.info::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #764abc;
  transform: skew(-30deg) translate(90%);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  opacity: 0.3;
  z-index: -1;
  transition: all 0.6s ease;
}

Here, we’ve done basically the same thing as the pseudo-element but switched the direction to the opposite direction. We also added a so shadows are added to the sides. This makes it look more 3D:

.profile-card:hover .info::before {
  transform: skew(30deg) translateX(50%);
}
.profile-card:hover .info::after {
  transform: skew(-30deg) translateX(40%);
  opacity: 0.7;
}

Here’s our output:

.profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #764abc;
  opacity: 0.3;
  transform: skew(30deg) translate(100%);
  transition: all 0.6s ease;
  z-index: -1;
}

This code should be self-explanatory by this point. We’ve simply done the same thing as above, but this time we’ve only translated the card’s own pseudo-element to the right by 85 percent. Take a look:

Next, we’ll create the last pseudo-element and skew it in the opposite direction from the :

.profile-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #764abc;
  opacity: 0.3;
  transform: skew(-30deg) translate(85%);
  transition: all 0.6s ease;
  z-index: -1;
}

As you would have guessed, we’ll also make it so that when this profile card is hovered, these newly created pseudo-elements move in, like the previous two. But this time around, we’ll move them even further than the previous two:

.profile-card:hover:before {
  transform: skew(30deg) translateX(30%);
}
.profile-card:hover:after {
  transform: skew(-30deg) translateX(20%);
}

Here’s what it will look like:

.profile-card {
 /*...previous code. */
  overflow: hidden;
}

Here’s the output:

Lastly, we will change the text color to white and make it so the opacity is fully transparent. However, when the card is hovered over, we’ll change the opacity back to normal, making them visible:

.info h2, .info p {
  color: #fff;
  opacity: 0;
  transition: all 0.6s;
}

.profile-card:hover .info h2,
.profile-card:hover .info p {
  opacity: 1;
}

Check out the final result:

Добавить комментарий

All CSS Pseudo Classes

Предотвращение выделения текста

Что такое псевдоэлементы в CSS?

Распространенные типы псевдоэлементов в CSS

Псевдоэлемент::первой строки

Псевдоэлемент::из первой буквы

::перед псевдо-элементом

::после псевдоэлемента

Псевдоэлемент::маркер

Псевдоэлемент::выбор

Conclusion

Is your frontend hogging your users’ CPU?

CSS искусство

СТЕК ИСКУССТВЕННОГО ИНТЕЛЛЕКТА

ДИАГРАММА ДРУЗЕЙ

СВЯЗАННЫЕ КРУГИ

Селекторы по псевдо-классам

Что такое псевдоэлемент и его назначение

Accessibility

Creating an animated button using CSS pseudo-elements

Немного особенностей

Pseudo-Elements vs. Pseudo-Classes

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

Заключение. Селекторы CSS.

Похожие записи:

Похожие записи:

Content Replacement

Working with Quotes

:first-letter

Например: блестящая кнопка

Добавляем эффект блеска

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

Не забудьте о «content»

:dir (эксперимент)

Inserting Non-Text Content

CSS искусство

СТЕК ИСКУССТВЕННОГО ИНТЕЛЛЕКТА

ДИАГРАММА ДРУЗЕЙ

СВЯЗАННЫЕ КРУГИ

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

Причина:

::before и ::after пустых и замещаемых элементов

Что такое псевдоэлемент и его назначение

:nth-child

Building an advanced animated profile card using multiple pseudo-elements

Похожие записи:

Похожие записи: