Css: псевдоклассы

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

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


Выполнение:

style type = «text/css» >

К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль.

Результат:

Пример: К содержимому абзаца с классом new добавить дополнительное слово — Ого! .

Выполнение:

Ловля льва в пустыне с помощью метода золотого сечения.

Метод ловли льва простым перебором.

Результат:

Пример: Для маркированного списка убрать маркер и установить вместо него какой-либо символ

Выполнение:

ul { list-style-type: none; /* Прячем маркеры списка */ } li:before { content: «\20aa «; /* Добавляем перед элементом списка символ в юникоде */ }

  • Чебурашка
  • Крокодил Гена
  • Шапокляк
  • Крыса Лариса

Результат:

Задание: Скопируйте текст, расположенный ниже, и вставьте в веб-страницу. Используя css либо , создайте следующие правила, чтобы достигнуть эффекта как на итоговом изображении.

Текст:

body >

h1 > Стих 1/ h1 >

p > br / > br / >

Я понял, что пришедшее извнеbr / > / p >

br / > br / >

(Угли недолго проживутbr / > / p >

Вот так и жду, не шевелясь,br / >

Когда уйдут из сердца лица,br / >

Ушедшие однажды с глаз,br / > / p >

hr >

h1 > Стих 2/ h1 >

p >

Обещай, что вернешься Домой.br / >

Эти зимы меня одолеют.br / >

Я смотрю на тебя и не смеюbr / > / p >

br / >

Нам обоим запомнятся годыbr / > br / >

Научившей любить и прощать. / p >

Обещай, что в далеком краю,br / >

Если станет тебе одиноко,br / > br / > / p >

И поселится в сердце покой.br / > br / >

Обещай,br / >

что когда-нибудь все жеbr / >

ты конечно вернешься Домой. / p >

hr >

/ body >

Стих 1

Вопрос такой: зачем все это мне? Но, не найдя ответа на подходе, Я понял, что пришедшее извне Стремительно вовне же и уходит.

Другой вопрос — как быть? Но тут Ответ просился сам: бездействуй! (Угли недолго проживут В костре, где все без происшествий.)

Вот так и жду, не шевелясь, Когда уйдут из сердца лица, Ушедшие однажды с глаз, Чтоб никогда не возвратиться.

Стих 2

Обещай, что вернешься Домой. Эти зимы меня одолеют. Я смотрю на тебя и не смею Прикоснуться холодной рукой.

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

Обещай, что в далеком краю, Если станет тебе одиноко, Ты прочтешь эти добрые строки Про бескрайнюю Нежность мою.

И поселится в сердце покой. Нет тебя мне на свете дороже. Обещай, что когда-нибудь все же ты конечно вернешься Домой.

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

Синтаксис использования псевдоэлементов следующий.

Селектор:Псевдоэлемент { Описание правил стиля }

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

Foo:first-letter { color: red } .foo:first-line {font-style: italic}

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

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

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

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

Популярные псевдоклассы CSS

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

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

Как записываются псевдоклассы CSS? Необходимо добавить стиль с названием необходимого элемента + имя псевдокласса. Пример:

a:link {
	color: red;
}

a:hover {
	color: #26A65B;
}

a:visited {
	color: #CCC;
}

В записанном стиле сказано, что обычные, непосещённые ссылки должны быть красного цветаa:link {color: red;}, ссылка при наведении должна менять цвет на другойa:hover {color: #26A65B;}, а посещённая ссылка должна иметь третий цветa: visited {color: #CCC;}.

Популярные псевдоэлементы CSS

Если псевдоклассы записываются с одним двоеточием, то псевдоэлементы – с двумя. Это было внедрено в CSS3 для того, чтобы различать псевдоклассы и псевдоэлементы между собой. Однако раньше этой разницы не существовало и с псевдоэлементами использовалось одно двоеточие. Сейчас браузеры поддерживают оба варианта написания (но не для всех случаев). Рассмотрим некоторые псевдоэлементы:

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

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

blockquote::before {
	content: "«";
}

blockquote::after {
	content: "»";
}

blockquote::selection {
	color: #C8F7C5;
	background-color: #1E824C;
}

Мы написали стиль для длинных цитат, который добавляет кавычки «ёлочки» в начале и в конце содержимого тега , а также изменяет цвет и фон выделенного пользователем текста цитаты.

Выводы

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

Благодаря селекторам потомков вам доступны гибкие и компактные настройки CSS-стилей.

Псевдоклассы позволяют создавать стиль для различных состояний элемента веб-страницы.

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

Следующая часть главы – о дочерних селекторах.

Хлебные крошки

Хлебные крошки представляют собой разновидность навигации по сайту, которая показывает путь к текущему документу и его положение в иерархии сайта (рис. 4).

Рис. 4. Хлебные крошки

Для создания такой навигации обычно применяется список <ul>, а внутри пунктов <li> вставляются ссылки на соответствующие разделы сайта. Чтобы отделить ссылки друг от друга, между ними вставляется разделитель, в качестве него обычно используется косая черта, но можно использовать стрелку и другие символы.

Разделитель добавляем через свойство content и селектор li + li::before, он выберет все элементы <li> кроме первого (пример 4).

Пример 4. Хлебные крошки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Хлебные крошки</title> <style> .breadcrumbs { margin: 0; /* Убираем отступы */ padding: 10px; /* Поля вокруг текста */ background: #b2d235; /* Цвет фона */ } .breadcrumbs li { display: inline-block; /* Размещаем список по горизонтали */ } .breadcrumbs a { color: #fff; /* Цвет ссылок */ text-decoration: none; /* Убираем подчёркивание у ссылок */ } .breadcrumbs li + li::before { content: ‘/’; /* Разделитель ссылок */ padding: 0 7px; /* Расстояние вокруг разделителя */ } </style> </head> <body> <ul class=»breadcrumbs»> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Картинки</a></li> <li><a href=»#»>Девушки</a></li> </ul> </body> </html>

Примеры использования псевдоэлементов after и before

1. Применение CSS псевдоэлементов и для оформления цитаты.

HTML разметка цитаты:

<div class="blockquote">Текст цитаты...</div>

CSS код для оформления цитаты:

.blockquote {
  margin: 0 auto;
  max-width: 400px;
  position: relative;
  padding: 5px 32px;
  background-color: #e0f2f1;
  color: #004d40;
  border-radius: 4px;
}

.blockquote::before {
  content: '\201e';
  position: absolute;
  top: -16px;
  left: 6px;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
}

.blockquote::after {
  content: '\201c';
  position: absolute;
  right: 6px;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
}


2. Пример использования псевдоэлемента для разделения элементов в хлебных крошках.

HTML структура хлебных крошек:

<ol class="breadcrumb">
  <li class="breadcrumb__item"><a href="#">Home</a></li>
  <li class="breadcrumb__item"><a href="#">Blog</a></li>
  <li class="breadcrumb__item breadcrumb__item_active" aria-current="page">Single post</li>
</ol>

CSS код хлебных крошек:

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  color: #b39ddb;
  background-color: #ede7f6;
  border-radius: .25rem;
}

.breadcrumb__item>a {
  text-decoration: none;
  color: #673ab7;
}

.breadcrumb__item>a:hover {
  text-decoration: none;
  color: #311b92;
}

.breadcrumb__item+.breadcrumb__item {
  padding-left: 8px;
}

/* добавление разделителя между элементами хлебных крошек с помощью псевдоэлемента before */
.breadcrumb__item+.breadcrumb__item::before {
  display: inline-block;
  padding-right: 8px;
  color: #673ab7;
  content: "•";
}

Изображние хлебных крошек:

3. Пример добавления hover эффекта к ссылке, оформленной с помощью background картинки, с использованием псевдоэлементов after и before.

Псевдоэлемент используется для затемнения изображения, а — для отображения картинки «Запустить».

HTML код ссылки:

<a href="#" class="image__over"></a>

CSS код с использованием after и before:

.image__over {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 56.25%;
  background: url(buterfly.jpg) no-repeat;
  background-size: cover;
  border-radius: 4px;
}

.image__over:hover::before,
.image__over:focus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(48, 53, 71, .4);
  cursor: pointer;
}

.image__over:hover::after,
.image__over:focus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 64px;
  width: 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 72px 64px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: -32px;
  margin-top: -36px;
  cursor: pointer;
}

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

HTML разметка этого примера:

<a href="#" class="image__over">
  <img src="buterfly.jpg" alt="">
</a>

CSS код:

.image__over {
  display: inline-block;
  font-size: 0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.image__over>img {
  max-width: 400px;
}

.image__over:hover::before,
.image__over:focus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(48, 53, 71, .4);
  cursor: pointer;
}

.image__over:hover::after,
.image__over:focus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 64px;
  width: 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 72px 64px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: -32px;
  margin-top: -36px;
  cursor: pointer;
}

Псевдо-элемент ::first-letter

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

В следующем примере форматируется первая буква текста во всех элементах :

Пример

p::first-letter {   color: #ff0000;   font-size: xx-large; }

Примечание: Псевдо-элемент может применяться только к блочным элементам.

Следующие свойства применяются к псевдо-элементу ::first-letter:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (только если «float» установлен «none»)
  • text-transform
  • line-height
  • float
  • clear

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

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

Важно: На псевдокласс указывает наличие двоеточия (:)

Три псевдокласса определены именно для гиперссылки (для тега a):

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

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

Выполнение:

style type = «text/css» >

.el1 : focus { outline : thick solid black }

.el1 : active { outline : thick solid red }

El1:focus { outline: thick solid black } .el1:active { outline: thick solid red }

Результат:

::first-letter

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

::first-letter будет работать только для блочных текстовых элементов вроде <div> и <p>.

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

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

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

Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша

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

Взгляд Оли опустился на пол, и она вскрикнула

В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.

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

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

CSS псевдоэлемент before

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

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

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

Псевдоэлемент::selection.

Псевдоэлемент ::selection (я не опечатался, пишется именно с двумя двоеточиями) указывает на стиль выделенного пользователем текста.

Данный псевдоэлемент появился на свет только в спецификации CSS3 и к сожалению поддерживается не всеми браузерами так IE его полностью игнорирует, а браузер Firefox использует свой аналогичный псевдоэлемент ::-moz-selection который официально не входит в спецификацию CSS.

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

Попробуете выделить данный текст, как будто Вы собираетесь его скопировать. Если Ваш браузер (например Opera 9.6 и выше) поддерживает псевдоэлемент::selection, Вы увидите, что выделенный текст станет красным, а его фон зелёным.

К данному псевдоэлементу можно применить только следующие CSS свойства: color , background и background-color .

В спецификации CSS3 в отличии от CSS2 и CSS2.1 все псевдоэлементы принято писать с двумя двоеточиями ::first-letter, ::first-line, ::after, ::before, и новый ::selection — таким вот способом разработчики решили оделить пседоэлементы от псевдоклассов . Однако такой синтаксис напрочь игнорирует Internet Explorer до 9 версии включительно! Так что пока псевдоэлементы лучше писать по старинке с одним двоеточием. Однако следует понимать, что например :first-letter и ::first-letter это формально два разных псевдоэлемента.


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

Цель урока: Рассмотрение понятия «медиа-запросы» для создания отзывчивой верстки. Знакомство с псевдоклассами и псевдоэлементами в CSS. Рассмотрены примеры создания стилей

Медиа-запросы — логическое выражение, которое может быть равно истине (true) или лжи (false)

Условием является либо параметры устройства, на котором отображается веб-страница, либо размеры экрана пользователя.

Медиа-запрос записывается либо в стилевом файле, либо во вложенном стиле и имеет следующую структуру:

All — все устройста. Может быть screen | print | tv

max-width — медиа функция , которая может задавать параметры указанного устройства или разрешение экрана

В примере устройство с максимальным разрешением экрана — 480px и с минимальным — 320px: Из примера видно, что функции могут содержать логические условия: AND — И, NOT — НЕ и ONLY — только

Медиа-запросы логично размещать после всех описанных стилей

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

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

Важная природа псевдоклассов изложена в самом первом предложении: «концепция псевдокласса разрешить выбор«. Это позволяет автору таблицы стилей различать элементы на основе информации, которая «лежит за пределами дерева документа», например, текущего состояния ссылки (, ). Они не сохраняются нигде в DOM, и для доступа к этим параметрам не существует интерфейса DOM.

С другой стороны, к можно получить доступ с помощью DOM-манипуляции (вы можете использовать для поиска объекта с помощью JavaScript), но это «не может быть выражено с помощью других простых селекторов».

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

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

Самая важная часть здесь заключается в том, что «псевдоэлементы позволяют авторам ссылаться на в противном случае недоступную информацию» и что они «также могут предоставить авторам возможность ссылаться на контент, который не существует в исходном документе (например, псевдо-элементы и предоставляют доступ к сгенерированному контенту)». что они фактически создают новый виртуальный элемент, к которому могут применяться правила и даже псевдосекторные селекторы. Они не фильтруют элементы, они в основном фильтруют контент (, ) и переносят его в виртуальный контейнер, который автор может создать, однако, он хочет (ну, почти).

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

Я полагаю, что самое большое различие заключается в том, что «на селектор может появляться только один псевдоэлемент». В заметке говорится, что это может быть изменено, но с 2012 года я не думаю, что мы увидим какое-либо другое поведение в будущем ().

Пример

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

Контент.

Псевдоэлементы after и before предназначены для «врезки» в страницу сайта контента который изначально неуказан в HTML документе. Вставляется содержание перед (:before ) или после (:after ) какого либо элемента с помощью свойства content , которое собственно и определяет содержимое для вставки.

Всё вместе пишется так:

p:after {content: «Конец, а кто слушал молодец!!»; }

Теперь после каждого параграфа будет добавляться надпись: «Конец, а кто слушал молодец!!»

Значением свойства content может быть:

  • «текст» — собственно любой текст или символы.
  • «\0410» — юникод.
  • url(путь) — адрес какого либо объекта.
  • open-quote — открывающая кавычка.
  • close-quote — закрывающая кавычка.
  • no-open-quote — отменяет открывающую кавычку.
  • no-close-quote — отменяет закрывающую кавычку.
  • inherit — наследует значение элемента родителя.
  • none — ничего не добавляется.
  • normal — для псевдоэлементов before и after тоже самое что и none .
  • counter — показывает значение счетчика, заданного свойством counter-reset .
  • attr(атрибут тега) — показывает текст, который является значением атрибута того или иного тега указанного в скобках.

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

Если бы при приеме на работу…

Однажды молодой сисадмин…

Список с нестандартными маркерами:

  • Первый
  • Второй
  • Третий

Чувствую перехитрил я с примером, поэтому несколько комментариев к нему:

Звездочка перед псевдоэлементом *:псевдоэлемент{свойство} говорит о том, что указанные правила стиля распространяются на все элементы. Так в нашем примере текст в начале везде синий, а в конце везде красный, если он конечно не указывается дополнительно, как например в случае с зелёными «маркерами» в списке из примера.

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

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

Псевдоэлементы after и before , как и свойство content не поддерживаются браузерами Internet Explorer 7 и ниже.

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Псевдоклассы форм

Последнее обновление: 21.04.2016

Ряд псевдоклассов используется для работы с элементами форм:

  • :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)

  • :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)

  • :checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)

  • :default: выбирает элементы по умолчанию

  • :valid: выбирает элемент, если его значение проходит валидацию HTML5

  • :invalid: выбирает элемент, если его значение не проходит валидацию

  • :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)

  • :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне

  • :required: выбирает элемент, если у него установлен атрибут required

  • :optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы enabled и disabled

Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :enabled {
				border: 2px black solid;
				color: red;
			}
        </style>
    </head>
    <body>
        <p><input type="text" value="Enabled" /></p>
        <p><input type="text" disabled value="Disabled" /></p>
    </body>
</html>

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

Псевдокласс checked стилизует элементы формы, у которых установлен атрибут :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :checked + span {
				color: red;
				font-weight: bold; 	/* выделение жирным */
			}
        </style>
    </head>
    <body>
			<h2>Выберите технологию</h2>
			<p>
                <input type="checkbox" checked name="html5"/><span>HTML5</span>
            </p>
            <p>
                <input type="checkbox" name="dotnet"/><span>.NET</span>
            </p>
            <p>
                <input type="checkbox" name="java"/><span>Java</span>
            </p>
			
			<h2>Укажите пол</h2>
			<p>
                <input type="radio" value="man" checked name="gender"/><span>мужской</span>
            </p>
            <p>
                <input type="radio" value="woman" name="gender"/><span>женский</span>
            </p>
    </body>
</html>

Селектор позволяет выбрать элемент, соседний с отмеченным элементом формы.

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

Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :default {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <input name="login"/>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Псевдоклассы valid и invalid

Псевдоклассы :valid и :invalid стилизуют элементы формы в зависимости от того, проходят они валидацию или нет.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            input:invalid {
				border: 2px solid red;
			}
			input:valid {
				border: 2px solid green;
			}
        </style>
    </head>
    <body>
		<form>
            <p><input type="text" name="login" placeholder="Введите логин" required /></p>
            <p><input type="password" name="password" placeholder="Введите пароль" required /></p>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Псевдоклассы in-range и out-of-range

Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли их значение в определенный диапазон. Это в первую очередь относится к элементу .

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :in-range {
				border: 2px solid green;
			}
			:out-of-range {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <p>
				<label for="age">Ваш возраст:</label> 
				<input type="number" min="1" max="100" value="10" id="age" name="age"/>
			</p>
            <input type="submit" value="Отправить" />
        </form>
    </body>
</html>

Здесь атрибуты и задают диапазон, в которое должно попадать вводимое в поле значение:

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

Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :optional {
				border: 2px solid blue;
			}
			:required {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
			<p>
				<label for="login">Логин:</label> 
				<input type="text" id="login" name="login" required />
			</p>
			<p>
				<label for="password">Пароль:</label> 
				<input type="password" id="password" name="password" required />
			</p>
            <p>
				<label for="name">Имя:</label> 
				<input type="text" id="name" name="name"/>
			</p>
            <input type="submit" value="Регистрация" />
        </form>
    </body>
</html>

НазадВперед

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

:enabled

:enabled выбирает включенные (активные для взаимодействия) элементы. Все элементы формы активны по умолчанию — утверждение верно до тех пор, пока мы не используем disabled атрибут в разметке.

Мы можем использовать комбинацию :enabled и :disabled для обеспечения визуальной обратной связи, тем самым улучшив UX.

Пример: поле ввода имени было выключено, но затем мы его активируем. У него появится зеленая обводка в 1px и его видимость (opacity) изменится на 1:

:enabled {    opacity: 1;    border: 1px solid green;}

Совет: Использовать enabled=”enabled” в разметке не обязательно. Тот же результат достигается при помощи логического атрибута enabled у html-элемента. Однако помните, что enabled=”enabled” необходимо в XHTML.

Demo:

Блок с цитатой

::before и ::after прекрасно подходят для оформления цитат, в частности, вывода увеличенных кавычек, которые показывают пользователям, что перед ними цитата (рис. 3).

Рис. 3. Вид цитаты с кавычками

Для отображения кавычки перед текстом мы используем ::before, а после текста — ::after. К ним же добавляем и желаемое оформление кавычек, вроде изменения цвета и размера (пример 3).

Пример 3. Кавычки в цитате

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Цитата</title> <style> blockquote { background: #f9f0de; /* Цвет фона */ border-left: 2px solid #0083ca; /* Линия слева */ padding: 1em; /* Поля вокруг текста */ } blockquote::before, blockquote::after { content: «“»; /* Левая кавычка */ font-size: 40px; /* Размер текста кавычек */ color: #c1172c; /* Цвет кавычек */ line-height: 0; /* Текст не занимает место */ } blockquote::after { content: «”»; /* Правая кавычка */ } </style> </head> <body> <blockquote>Чаще всего выход там, где был вход.</blockquote> </body> </html>

:nth-child

Данный псевдокласс является глобальной версией :first-child и :last-child. С помощью :nth-child вы можете вычислить конкретный дочерний целевой элемент.

К примеру, если вы хотите нацелиться на второй дочерний элемент, то используйте :nth-child(2).

odd и even

Кроме использования чисел, :nth-child поставляется с двумя ключевыми словами:

  • :nth-child(odd) нацелится на каждый нечётный элемент;
  • :nth-child(even) нацелится на каждый чётный элемент.

Счётчик n

Мощным аспектом :nth-child является то, что он может нацелиться на элементы, основываясь на расчётах с помощью ключевого слова n.

Значение n повышается от 0 до количества представленных дочерних элементов.

Что делать, если вы хотите нацелиться на каждый третий элемент?

В нашем случае n начинается с нуля и заканчивается шестью.

Компьютеры начинают отсчёт с нуля. И поскольку в нашем списке семь элементов, мы будем считать до шести, потому что 0-1-2-3-4-5-6 представляют семь пунктов.

Вы можете прочитать :nth-child(3n) как «нацелиться на каждый элемент, положение которого делится на 3». В нашем случае, это третий и шестой пункт списка:

  • 3 умножить на 0 равен нулю;
  • 3 умножить на 1 — третий пункт;
  • 3 умножить на 2 — шестой пункт.

n + 1

Что делать, если вы хотите нацелиться на первый пункт и каждый третий пункт после него?

3n + 1 состоит из двух частей:

  • 3n выбирает каждый третий пункт;
  • +1 смещает начало на 1.

Вот как были выполнены вычисления:

  • 3 умножить на 0 плюс 1 равно 1;
  • 3 умножить на 1 плюс 1 равно 4;
  • 3 умножить на 2 плюс 1 равно 7.

Счётчик n является очень гибким. Если вычисления делать сложно, то просто протестируйте, чтобы получить правильную выборку.


С этим читают