Псевдоклассы и псевдоэлементы: Псевдоэлементы и псевдоклассы CSS. Контекстные селекторы — учебник CSS – Pseudo-elements — Web technology for developers — Вебджем.рф

Содержание

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

Псевдоэлемент `::placeholder`

Псевдоэлемент ::placeholder позволит вам оформить внешний вид текста, который выводится с помощью атрибута placeholder для любого текстового поля формы. Как правило, используются теги <input> атрибутом type="text" или "email", но также их часто можно встретить в полях типа "url" или "search":

Для того чтобы стилизовать псевдоэлемент ::placeholder пока еще необходимо использовать вендорные префиксы для разных браузеров:

/* Chrome/Opera/Safari до 2017 года*/ ::-webkit-input-placeholder { color: orange; } /* Firefox 19-50 */ ::-moz-placeholder { color: orange; } /* Firefox 4-18 */ :-moz-placeholder { color: orange; } /* IE 10+ */ :-ms-input-placeholder { color: orange; } /*Microsoft Edge */ ::-ms-input-placeholder{ color: orange; }

/* Chrome/Opera/Safari до 2017 года*/

::-webkit-input-placeholder {

color: orange;

}

/* Firefox 19-50 */

::-moz-placeholder {

color: orange;

}

/* Firefox 4-18 */

:-moz-placeholder {

color: orange;

}

/* IE 10+ */

:-ms-input-placeholder {

color: orange;

}

/*Microsoft Edge */

::-ms-input-placeholder{

color: orange;

}

Поддержку этого псевдоэлемента можно посмотреть на сайте caniuse.com

Пример ниже показывает, как можно изменить цвет шрифта во всех полях формы.

See the Pen Псевдоэлемент ::placeholder by Elen (@ambassador) on CodePen.18892

В примере поле с type="search" имеет другой цвет текста в placeholder. Чтобы изменить цвет для определенного типа поля, необходимо записать стили этого псевдоэлемента так:

input[type=»search»]::placeholder { color: #09f; }

input[type=»search»]::placeholder {

color: #09f;

}

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

input[type=»search»]::-webkit-input-placeholder{ color: #09f; } input[type=»search»]:-moz-placeholder { color: #09f; } input[type=»search»]::-moz-placeholder { color: #09f; } input[type=»search»]:-ms-input-placeholder { color: #09f; } input[type=»search»]::-ms-input-placeholder { color: #09f; }

input[type=»search»]::-webkit-input-placeholder{

color: #09f;

}

input[type=»search»]:-moz-placeholder {

color: #09f;

}

input[type=»search»]::-moz-placeholder {

color: #09f;

}

input[type=»search»]:-ms-input-placeholder {

color: #09f;

}

input[type=»search»]::-ms-input-placeholder {

color: #09f;

}

Если рассмотреть синтаксис чуть пристальней, то мы увидим, что часть браузеров использует псевдоэлемент ::placeholder с двумя двоеточиями, а другая часть — псевдокласс :placeholder с одним двоеточием перед названием.

Важный момент: в css-правилах вы можете использовать не все свойства, а только те, что перечислены ниже:

color
font и все связанные свойства (font-size, font-family и т.д.)
text-decoration
text-indent
text-overflow
text-transform
line-height
word-spacing
letter-spacing
background и все связанные свойства (background-color, background-image и т.д.)
opacity
vertical-align

В основном, это свойства, так или иначе связанные с форматированием текста.

Псевдокласс `:placeholder-shown`

Кроме псевдоэлемента ::placeholder в стандарте CSS существует еще псевдокласс :placeholder-shown, посмотреть поддержку которого можно также на сайте caniuse.com.

Отличие :placeholder-shown от ::placeholder заключается в том, что оформление с помощью :placeholder-shown работает только тогда, когда в полях input и textarea виден текст заполнителя, т.е. значение атрибута placeholder. Когда пользователь начинает вводить текст, это оформление меняется на стандартное или описанное в стилях для данной страницы/сайта.

<style>

input, textarea { border: 2px solid black; }

input:-moz-placeholder-shown,

textarea:-moz-placeholder-shown { border: 2px dotted orange; }

input:-ms-input-placeholder-shown,

textarea:-ms-input-placeholder-shown{ border: 2px dotted orange; }

input:placeholder-shown,

textarea:placeholder-shown { border: 2px dotted orange; }

</style>

<div>

</div>

Посмотрите пример в действии. Для этого нужно набрать какой-либо текст в поле ввода (<input>) или в текстовой области (<textarea>).

Отличный пример использования этого свойства можно продемонстрировать для первоначального скрытия текста метки поля (label), а затем анимированного ее перемещения в конец поля. Т.е. когда мы видим текст из атрибута placeholder, нам текст в label не нужен — поэтому он скрыт (свойство opacity: 0). Как только пользователь начинает вводить текст, заполняя поле, текст из

placeholder автоматически пропадает, зато выезжает label и размещается в качестве подсказки в конце поля.

See the Pen Псевдокласс :placeholder-shown by Elen (@ambassador) on CodePen.18892

Цвет каретки

Теперь можно в CSS задать цвет каретки, т.е. курсора, который мерцает при вводе текста. Для этого нужно использовать свойство caret-color. Поддержка в современных браузерах пока не очень четкая, но последние версии и Firefox, и Chrome, и Safari, и Opera, причем и для ОС Android и iOS уже поддерживают это свойство. Отстает Microsoft Edge и IE и Opera Mini.

В примере ниже вы можете увидеть разницу между черной и синей кареткой.

Псевдоклассы `:required` и `:optional`

В HTML появился очень удобный атрибут required для обязательных к заполнению элементов форм. Ему соответству в CSS псевдокласс :required, который позволяет выделить нужным вам образом все обязательные поля. Другой псевдокласс — :optional, напротив, находит любые элементы <input> , у которых не установлен атрибут required. Он позволяет задавать необязательным элементам формы другие стили.

Попробуем на примере использовать псевдоклассы:required и :optional. Выделим разными рамками обязательные и необязательные поля. Кроме того, используем привычную для всех звездочку для указания на обязательное поле, но не в виде текста, а в виде

псевдоэлемента ::after для элемента label.

.group-field input:required + label::after { content: ‘*’; color: red; }

.group-field input:required + label::after {

content: ‘*’;

color: red;

}

Для использования этого селектора нам понадобилось разместить label после input. Визуально поменяем их местами, назначив родительскому элементу p с классом .group-field свойство display: flex, а вложенному в него элементу input свойство order:1, использовав преимущества разметки с помощью модели Flexbox:

.group-field {display: flex;} .group-field input,.group-field select { order: 1; …; } —— <p> <input type=»text» required=»required»> <label for=»name»>Имя</label> </p>

.group-field {display: flex;}

.group-field input,.group-field select {

order: 1;

…;

}

——

<p>

</p>

Пример формы с обязательными и необязательными полями:

See the Pen Псевдоклассы :required и :optional by Elen (@ambassador) on CodePen.18892

Псевдокласс `:checked`

Все предыдущие свойства относились к оформлению текстовых полей и областей. Однако спецификация не обошла вниманием флажки и переключатели (или радио-кнопки). Как правило, их нужно отмечать или выбирать, т.е. назначать атрибут checked. Поэтому в CSS3 появился псевдокласс

:checked. С его помощью мы можем стилизовать выбранные элементы формы.

Рассмотрим такой пример:

See the Pen Псевдокласс :checked by Elen (@ambassador) on CodePen.18892

При клике на любом флажке или переключателе текст в элементе label, привязанном к нему становится жирным и выделяется другим цветом. И все это за счет работы псевдокласса :checked:

input:checked + label { color: #179cb9; font-weight: bold; }

input:checked + label {

color: #179cb9;

font-weight: bold;

}

Поскольку нам нужно отформатировать именно текст в label, здесь использован соседний селектор (input:checked + label). Для того чтобы задать форматирование только для радио-кнопок, можно использовать селектор атрибута:

input[type=»radio»]:checked+label{ color: #179cb9; font-weight: bold; }

input[type=»radio»]:checked+label{

color: #179cb9;

font-weight: bold;

}

Задачи на работу с псевдоклассами и псевдоэлементами CSS

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

На first-letter

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: first-letter.

Повторите страницу по данному по образцу: