2. Псевдоклассы – это селекторы, которые определяют состояние уже
существующих элементов, которое может меняться при определенных условиях.
Псевдоэлементы – это селекторы, которые определяют область элементов,
которая изначально отсутствует в дереве документа. Эта область создается
искусственно с помощью CSS. (after, before)
Ключевое отличие между ними в том, что псевдоклассы определяют именно
состояние элементов, которые уже существуют на странице, а псевдоэлементы
создают области (искусственные элементы), которых изначально на веб-странице
не было. Но и те и другие отсутствуют в исходном коде документа.
3. Псевдо-классы состояния
псевдо-класс состояние, как правило, начинает работать когда пользователь
выполняет действие.
CONTENT - определяет содержимое псевдоэлементов
• none - содержимое псевдоэлемента не отображается. Полезно, если нужно
скрыть ранее заданный псевдоэлемент.
• url -адреса картинок.
• String - текстовый контент. Можно вставлять простой текст и символы
юникода.
4. • <counter> — счетчик. С помощью этого значения можно пронумеровать не
только списки, но и любые элементы на странице.
– counter-reset задает имя счетчика.
– counter-increment увеличивает значение заданного счетчика.
– content: counter(имя счетчика) выводит значение счетчика в качестве содержимого
псевдоэлемента.
5. Псевдо-классы состояния
:LINK
Псевдокласс :link применяется к ссылкам, которые еще не посещались
пользователем, и задает для них стилевое оформление.
a:link { color: #0000d0; /* Цвет ссылок */ }
a:visited { color: #900060; /* Цвет посещенных ссылок */ }
:VISITED
Псевдокласс :visited применяется к ссылкам, уже посещённым
пользователем, и задаёт для них стилевое оформление.
:HOVER
Определяет стиль элемента при наведении на него курсора мыши, но
при этом элемент еще не активирован.
:FOCUS
:focus определяет стиль для элемента, получающего фокус..
6. Структурные псевдо-классы
Структурные псевдо-классы были введены как способ указать элементы HTML на
основе информации в дереве документа, которую сложно просто представить с
помощью простых селекторов и комбинаторов. Без них приходится использовать
класс или идентификатор для указания элемента.
:FIRST-CHILD & :LAST-CHILD
представляют собой короткую запись для nth-child(1) и nth-last-child(1).
Требуется, чтобы потомки были одного типа.
:FIRST-OF-TYPE & :LAST-OF-TYPE
задаёт правила стилей для первого (последнего)элемента в списке дочерних
элементов своего родителя.
:NOT
задаёт правила стилей для элементов, которые не содержат указанный селектор.
В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы
и селекторы атрибутов. Но не может содержать внтури еще один :not селектор
Конструкция :not(:not)
li:not(.first-item) { color: orange; }
Но возможно использование использование двух селекторов в одной конструкции
li:not(.first-item):not(:last-of-type) { background: yellow; color: black; }
7. :NTH-CHILD
используется для добавления стиля к элементам на основе нумерации в дереве
элементов. Селектор:nth-child(odd | even | <число> | <выражение>) {...}
:NTH-LAST-CHILD
Псевдокласс :nth-last-child используется для добавления стиля к элементам на
основе нумерации в дереве элементов. В отличие от псевдокласса :nth-
child отсчёт ведётся не от первого элемента, а от последнего.
:NTH-OF-TYPE
используется для добавления стиля к элементам указанного типа на основе
нумерации в дереве элементов.
:NTH-LAST-OF-TYPE
используется для добавления стиля к элементам указанного типа на основе
нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчёт
ведётся не от первого элемента, а от последнего.
:ONLY-CHILD
применяется к дочернему элементу, только если он единственный у
родителя. Аналогичен использованию :first-child:last-child или:nth-child(1):nth-last-
child(1).
:ONLY-OF-TYPE
применяется к дочернему элементу указанного типа, только если он
единственный у родителя. Аналогичен использованию:first-of-type:last-of-
type или :nth-of-type(1):nth-last-of-type(1).
8. :CHECKED
Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox),
флажки (radio) и пункты списка (option), когда они находятся в положение «включено».
Переключение элементов в такое состояние происходит с помощью
атрибута checked элемента <input> или пользователем.
:DEFAULT
Псевдокласс :default применяет стиль к элементам форм, которые установлены по умолчанию в
группе похожих элементов.
:DISABLED
Псевдокласс :disabled используется для применения стиля к заблокированным элементам форм.
Такие элементы не могут получить фокус, быть нажатыми или активированы, в текстовых полях
нельзя набирать текст.
:EMPTY
Псевдокласс :empty представляет пустые элементы, иными словами такие, которые не содержат
дочерних элементов, текста или пробелов.
:ENABLED
Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным)
элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к
ним не добавляется атрибут disabled.
:IN-RANGE
Применяется к элементам форм, у которых введённое пользователем значение находится в
заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max,
они, соответственно, задают минимальное и максимальное значение.
9. :OUT-OF-RANGE
Применяется к полям форм, у которых введённое пользователем значение выходит из заданного
диапазона. Псевдокласс работает только для тех полей, где пользователь может сам ввести
значение, даже несмотря на ограничения наложенные атрибутами min и max.
:INDETERMINATE
Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в
неопределённом состоянии. К примеру, если ни один переключатель не помечен, то они
находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у
которых DOM-атрибут :indeterminate через JavaScript установлен в значение true.
:VALID
Применяется к полям формы, содержимое которых проходит проверку в браузере на
соответствие указанному типу. Например, для type="number" вводится число, а не буквы,
для type="email" корректный адрес электронной почты.
input[type=email]:valid { border: 1px solid green; }
:INVALID
Применяется к полям формы, содержимое которых не соответствует указанному типу. Например,
для type="number" должно вводиться число, а не буквы, дляtype="email" корректный адрес
электронной
:OPTIONAL
Применяет стилевые правила к элементу <input>, у которого не задан атрибутrequired. Он
позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким
образом :optional применяется к необязательным полям формы.
10. :READ-ONLY
Применяется к полям формы, у которых задан атрибут readonly. Такое
поле не может быть модифицировано и получить фокус.
: read-only псевдо-класс для елементов который не моuen быть изменен
пользователем. псевдо-класс мы должны использовать.
:READ-WRITE
Применяется к полям формы, доступных для изменения. Псевдокласс :read-
writeявляется противоположным по своему действию :read-only, который
применяется к полям с атрибутом readonly (только для чтения).
:REQUIRED
Применяет стилевые правила к элементу <input>, у которого установлен атрибутrequired.
Он позволяет выделять поля обязательные к заполнению перед отправкой формы.
:first Выбирает первый найденный элемент.
11. Селекторы jQuery
jQuery поддерживает все стандартные селекторы CSS и псевдоклассы и
псевдоэлементы CSS. Кроме того, jQuery поддерживает нестандартные
селекторы (псевдоклассы).
:first Выбирает первый найденный элемент.
$('li:first');
:last Выбирает последний найденный элемент.
С помощью :first-child мы найдем все li, которые являются первыми потомками
своих родителей, а с помощью :first мы найдем первый li среди выбранных (так
как выбирали мы все li, то по сути мы найдем первый li на странице). То есть :first
и другие подобные селекторы jQuery работают так: находят все элементы по
заданному селектору, а затем берут первый элемент среди найденны
$('li:first-child');
:eq(номер) Выбирает элемент идущий под заданным номером среди
выбранных.
С помощью :eq мы можем выбрать элемент с любым номером в наборе, к
примеру, таким образом - :eq(3) - мы выберем третий найденный элемент.
12. :lt(число) Выбирает элементы с номером в наборе меньшим, чем заданное
число.
:gt(число) Выбирает элементы с номером в наборе превышающим заданное
число.
:even Выбирает элементы с четными номерами позиций в наборе выбранных
элементов.
:odd Выбирает элементы с нечетными номерами позиций в наборе выбранных
элементов.
С помощью :lt и :gt можно выбирать элементы с номером, меньшим или
большим заданного числа соответственно. К примеру, так - :lt(3) - мы выберем
элементы с номером, меньшим трех, то есть элементы номер 2, 1 и 0.
С помощью :even и :odd можно выбирать четные и нечетные элементы в наборе.
:has(селектор) Выбирает элементы, которые содержат хотя бы один элемент по
заданному селектору.(выбирает элементы по их содержимому)
можно выбрать так: все абзацы, внутри которых есть теги b:
<p>Абзац с тегом <b>b</b>.
</p> <p>Абзац с тегом <i><b>b</b></i>.</p>
<p>Абзац без b.</p>
$('p:has(b)')
13. :contains(текст) Выбирает элементы, содержащие заданный текст.
<p>Слово "текст".</p>
<p>Просто абзац.</p>
$('p:contains("текст")')
:header Выбирает заголовки (теги h1, h2, h3, h4, h5, h6).
:parent Выбирает элементы, являющиеся родителями (то есть непустые
элементы).
:empty Выбирает элементы без содержимого (без текста и других элементов).
:animated Выбирает элементы, которые в данный момент задействованы в
анимации.
:hidden Выбирает невидимые элементы страницы.
:visible Выбирает видимые элементы страницы.
14. Формы
:button Выбирает кнопки: тег button или инпут с типом button.
:radio Выбирает радио переключатели.
:checkbox Выбирает чекбоксы.
:text Выбирает инпуты с типом text.
:password Выбирает поля для ввода пароля.
:file Выбирает элементы, являющиеся полями загрузки файлов.
:submit Выбирает элементы, являющиеся кнопками отправки формы.
:reset Выбирает элементы, являющиеся кнопками очистки формы.
:image Выбирает элементы, являющиеся изображениями для отправки формы
(input типа image).
:input Выбирает элементы формы: теги input, textarea или button.
:selected Выбирает элементы с атрибутом selected.
