Полное руководство по псевдоклассам CSS
Если вы новичок или опытный разработчик CSS, вы, вероятно, слышали о псевдоклассы. Самый известный псевдокласс, вероятно, : парить, что позволяет нам стилизовать элемент, когда это в состоянии наведения, т.е. когда на него направлено указательное устройство, например мышь.
Следуя концепции наших предыдущих постов на полях: auto и CSS Floats, мы более подробно рассмотрим псевдоклассы в этом посте. Посмотрим что такое псевдоклассы, как они работают, как мы можем классифицировать их, и чем они отличаются от псевдоэлементов.
Что такое псевдоклассы?
Псевдокласс - это ключевое слово, которое мы можем добавить к селекторам CSS, чтобы определить особое состояние принадлежащего элемента HTML. Мы можем добавить псевдокласс к селектору CSS, используя синтаксис двоеточия : как это: a: hover …
Класс CSS - это атрибут, который мы можем добавить к элементам HTML, для которых мы хотим применить те же правила стиля, например, элементы верхнего меню или заголовки виджетов боковой панели. Другими словами, мы можем использовать классы CSS для группировать или классифицировать элементы HTML которые похожи так или иначе.
Псевдоклассы похожи на них в том смысле, что они также используется для добавления правил стиля к элементам, имеющим одинаковую характеристику.
Но в то время как подлинные классы определяемые пользователем а также может быть замечен в исходном коде, например работа регулярных классов CSS это к классифицировать или группировать элементы. Разработчики знают, как их элементы должны быть сгруппированы: они могут формировать классы, такие как «пункты меню», «кнопки», «миниатюры» и т. Д., Чтобы группировать, а затем стилизовать похожие элементы. Эти классификации основаны на характеристиках элементов, которые дано самими разработчиками. Например, если разработчик решает использовать HTML-элементы, однако, имеют их собственные общие характеристики на основе их состояния, положения, характера и взаимодействия со страницей и пользователем. Это те характеристики, которые не обычно отмечается в коде HTML, но мы можем предназначайтесь для них псевдоклассами в CSS, например: Это те характеристики, которые обычно предназначены для псевдоклассов. Чтобы лучше понять разницу между классами и псевдоклассами, давайте предположим, что мы используем класс Мы можем стилизовать эти последние дочерние элементы с помощью следующего CSS: Но что происходит, когда последний элемент изменяется? Ну, нам придется переместить Это хлопот Обновление классов можно оставить пользовательскому агенту, по крайней мере, для тех характеристик, которые являются общими для элементов (а последний элемент настолько распространен, насколько это возможно). имеющий заранее определенный Существует много видов псевдоклассов, каждый из которых предоставляет нам способы нацеливания на элементы, основанные на их функциях, которые в противном случае недоступны или сложнее для доступа. Вот список стандартных псевдо-классов в MDN. Динамические псевдоклассы добавляются и удаляются из элементов HTML. динамично, в зависимости от состояния, в которое они переходят в ответ на взаимодействия пользователя. Некоторые примеры динамических псевдоклассов Основанные на состоянии псевдоклассы добавляются к элементам, когда они в определенном статическом состоянии. Вот некоторые из наиболее известных примеров: Самый популярный государственный псевдокласс должен быть Структурные псевдоклассы классифицируют элементы на основе на их позиции в структуре документа. Его наиболее распространенные примеры Существуют также разные псевдоклассы, которые трудно классифицировать, такие как: Одна из самых сложных вещей в псевдоклассах - это, вероятно, понять разницу между Оба являются структурными псевдоклассами, и маркируют конкретный элемент внутри родительского элемента (контейнер), но по-другому. Предполагать N 2, то Давайте посмотрим на пример. Давайте посмотрим, как этот короткий CSS стиль HTML в двух разных случаях. В случае 1 второй элемент внутри Но если родительский элемент делает есть второй абзац, В нашем примере Параграф 1, Ребенок 1 Параграф 2, Ребенок 3 Во втором случае мы переместим неупорядоченный список на третье место, и перед ним появится второй абзац. Это означает, что оба Параграф 1, Ребенок 1 Параграф 2, Ребенок 2 Если вы хотите узнать больше о различиях между Когда мы говорим о псевдоклассах, важно понимать чем они отличаются от псевдоэлементов, чтобы не перепутать. Но пока мы используем псевдоклассы для выбора элементов HTML, которые существует в дереве документов просто не отмечены отдельно, псевдоэлементы позволяют нам целевые элементы, которые обычно не существует в DOM, либо вообще (например, Там также есть разница в синтаксисе. Псевдоэлементы обычно отождествляются с двойными двоеточиями Это может привести к путанице, так как в CSS2 псевдоэлементы были также помечены одним двоеточием - браузеры по-прежнему принимают синтаксис одинарного двоеточия для псевдоэлементов.. Существуют также различия между псевдоклассами и псевдоэлементами в как мы можем нацелить их с помощью CSS. Псевдоэлементы могут появляться только после последовательность селекторов, тогда как псевдоклассы могут быть размещены в любом месте последовательности селекторов CSS. Например, вы можете настроить таргетинг на последний элемент списка элемента списка, например ИЛИ ЖЕ Первая последовательность селектора выбирает последнего потомка внутри Попробуем сделать что-то похожее с псевдоэлементами. Приведенный выше код CSS действителен, и появится текст «красный» после Этот код, с другой стороны, не будет работать, так как мы не может изменить положение псевдоэлемента внутри последовательности селектора. Кроме того, только один псевдоэлемент может появиться рядом с селектором, тогда как псевдо-классы могут быть объединены друг с другом если комбинация имеет смысл. Например, для нацеливания на первые дочерние элементы, которые также доступны только для чтения, мы можем создать комбинацию псевдоклассов. Код селектора с Важно знать, что это не CSS псевдоклассы которые нацелены на jQuery. Они называются расширениями селектора jQuery.. Расширения селектора jQuery позволяют целевые элементы HTML с более простыми ключевыми словами. Большинство из них представляют собой комбинации нескольких обычных селекторов CSS, которые представлены одним ключевым словом..Назначение псевдоклассов
.прошлой идентифицировать последние элементы в разных родительских контейнерах.
li.last text-transform: прописные буквы; option.last font-style: italic;
.прошлой класс от предыдущего последнего элемента до текущего.:последний ребенок Псевдо-класс это действительно очень полезно. Таким образом, мы не нужно указывать последний элемент в HTML-коде, но мы все еще можем стилизовать их с помощью следующего CSS: li: last-child text-transform: прописные буквы; опция: last-child font-style: italic;
Основные типы псевдоклассов
1. Динамические псевдоклассы
: парить, : фокус, :ссылка на сайт, а также : посетил, все из которых могут быть добавлены к якорный тег. а: посетил цвет: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Псевдоклассы на основе состояния
: проверено которые могут быть применены для флажков ():полноэкранный нацеливаться на любой элемент, который в данный момент отображается в полноэкранном режиме:отключен для элементов HTML, которые могут быть в отключенном режиме, например , , а также . : проверено, который указывает, установлен ли флажок или нет. .флажок: флажок + метка стиль шрифта: курсив; вход: отключен background-color: #EEEEEE;
3. Структурные псевдоклассы
:Первый ребенок, :последний ребенок, а также : П-й ребенок (п) - все могут быть использованы для нацеливания на определенный дочерний элемент внутри контейнера в зависимости от его положения - и : корень который нацелен на родительский элемент самого высокого уровня в DOM. 4. Разные псевдоклассы
: Нет (х) который выбирает элементы, которые не соответствуют селектору х: Языки (язык-код) который выбирает элементы, содержание которых находится на определенном языке: Каталог (Направленность) который выбирает элементы с содержимым заданной направленности (слева направо или справа налево). p: lang (ko) background-color: # FFFF00; : root background-color: # FAEBD7;
п-й ребенок против nth типа Псевдо-классы
: П-й ребенок а также : П-о-типа псевдоклассы.: П-й из-ребенка (п) предназначается для элемента, который является второй дочерний элемент своего родительского элемента, а также : П-го из-типа (п) цели второй среди того же типа элемента (например, параграфы) внутри родительского элемента. / * абзац, который также является вторым дочерним элементом в родительском элементе * / p: nth-child (2) color: # 1E90FF; // lightblue / * второй абзац внутри родительского элемента * / p: nth-of-type (2) font-weight: bold;
Случай 1
п-го ребенка (2) Правило не будет применяться к нему. Хотя это второй ребенок, это не параграф. п-оф-типа (2) правило будет применяться, так как это правило ищет только элементы, и не заботится о других типы элементов (таких как неупорядоченные списки) внутри родительского элемента.п-оф-типа (2) правило будет стилизовать второй абзац, который является ребенком 3.
Неупорядоченный список 1, ребенок 2
Дело 2
: П-й ребенок (2) и : П-го из-типа (2) правила будут применяться, так как второй абзац также является вторым дочерним элементом своего родителя
Неупорядоченный список 1, ребенок 3
: П-й из-ребенка а также : П-о-типа У псевдоклассов CSS Tricks есть отличный пост. Если вы используете SASS, Family.scss может помочь вам создать сложный п-й ребенок'ified элементы.Псевдоклассы против псевдоэлементов
Псевдо-элементы, такие как ::до а также ::после (см. этот урок о том, как их использовать) также добавлено пользовательскими агентами, а также они могут быть нацелены и стилизованы с помощью CSS так же, как псевдоклассы. ::до а также ::после) или только как определенные части существующих элементов (например, ::первое письмо или же :: заполнитель). ::, тогда как псевдоклассы отождествляются с одним двоеточием :.1. Их место в последовательности селектора CSS
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.красный) и второй выбирает последнего потомка среди элементов, которые обладают .красный класс внутри ul> .red :: after display: block; содержание: «красный»; цвет: # B0171F;
предметы с классом .красный. ul> :: after.red display: block; содержание: «красный»; цвет: # B0171F;
2. Количество вхождений в последовательности селектора
:Первый ребенок а также : Только для чтения следующим образом: : first-child: только для чтения color: #EEEEEE;
Расширения селектора jQuery
: синтаксис не всегда представляет собой правильный псевдокласс CSS. Если вы когда-либо использовали jQuery, то вы могли бы использовать многие из его селекторов с : синтаксис, например $ ( ': Флажок'), $ ( ': Ввод') а также $ ( ': Выбрано'). / * Изменить шрифт всех связанных с вводом элементов HTML, таких как кнопка, выбор и ввод * / $ (": input") .css ("font-family", "courier new")
