Псевдоэлементы.
Произношение ключевых слов CSS на английском.
Голосовое произношение на английском языке ключевых слов используемых для стилизации определенных частей выбранного элемента, с переводом на русский и краткой справкой.
Псевдоэлементы это ключевое слово, добавляемое к селектору, которое позволяет задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Их отличает от псевдоклассов то, что последние определяют состояние уже существующих элементов, которое может меняться при определенных условиях.
Слушать произношение:
- first-letter
- - [fəːst ˈlɛtə] -
- первый символ
::first-letter - псевдоэлемент, определяет стиль первого символа в тексте элемента, к которому добавляется. Пример: p::first-letter { color: red }
- first-line
- - [fəːst laɪn] -
- первая строка
::first-line - псевдоэлемент, определяет стиль первой строки блочного текста. Пример: p::first-line {color: navy;}
- after
- - [ˈɑːftə] -
- после
::after - псевдоэлемент, используется для вывода контента после содержимого элемента, к которому он добавляется, работает совместно со свойством content. Пример: p.new::after {content: "любой текст";}
- before
- - [bɪˈfɔː] -
- перед
::before - псевдоэлемент, применяется для отображения контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content. Пример: p.new::before {content: "любой текст";}
| Мир: | 2200 7704 4708 4353 |
| Яндекс: | 41 00 11 25 13 54 962 |
| Киви: | ALEKS33550336 |
- backdrop
- - [ˈbakdrɒp] -
- фон на котором развёртываются события
:backdrop псевдоэлемент, отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно ::backdrop применяется для затемнения страницы. Работает только с модальными окнами, созданными с помощью элемента dialog. - Пример: dialog::backdrop { background: rgba(0,0,0,0.7); }
- placeholder
- - [ˈpleɪshəʊldə] -
- метка-заполнитель
placeholder символ или фрагмент текста в математическом выражении или компьютерной инструкции, которые могут быть заменены конкретными частями информации.
::placeholder псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет. - Пример: input[type="search"]::placeholder { color: #ffd595; }
- selection
- - [sɪˈlɛkʃ(ə)n] -
- выбор
::selection псевдоэлемент, применяет стиль к выделенному пользователем тексту. - Пример: p::selection { color: #ff0; }
- pseudo-elements
- - [ˈsjuːdəʊ ˈelɪmənts] -
- псевдо-элементы
- pseudo
- - [ˈsjuːdəʊ] -
- псевдо
- element
- - [ˈɛlɪm(ə)nt] -
- элемент
Элемент — составляющая часть чего-либо (особенно — простая, не состоящая, в свою очередь, из других частей).
Селектор (selector) — это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс, идентификатор или атрибут со значением или без. Пример: h1, div, .myClass, #main, a[target="_blank"]