Все актуальнее становится использование фич css3 по мере улучшения поддержки его браузерами. И вот одна из этих фич это псевдоклассы и псевдоэлементы.
Чтобы проще было ориентироваться в них и использовать, постараюсь максимально кратко и понятно пояснить, что каждый из них значит. Поехали.
Pseudo-elements
- позволяют задать стиль элемента, который не определен в дереве элементов документа
Эти псевдо-элементы давно с знакомы еще с css2. Они добавляют контент до и после элемента соответственно.
Задает стиль для первого символа в тексте элемента.
Задает стиль первой строки в тексте элемента.
Pseudo-classes
- определяют динамическое состояние элемента, которое изменяется со временем или из-за действий пользователя
С его помощью мы, в html-документе, можем находить элементы checkbox и radio в состоянии checked.
С его помощью мы можем поменять стиль кнопки, которая в текущем форме является кнопкой по-умолчанию.
"По-умолчанию" считается первый input с типом submit в разметке.
С помощью псевдо-класса disabled мы можем указать стили для тех элементов, которые находятся в выключенном состоянии. Соответственно псевдо-класс enabled используем для поиска элементов во включенном состоянии.
С помощью этого псевдо-класса мы можем получить элементы, которые не содержат в себе дочерних элементов или текст.
:first-of-type
:last-of-type
С помощью этих псевдо-классов мы может получить в списке дочерних элементов первый и последний элемент соответственно.
Применяется к элементу, который мы хотим получить, а не к родительскому элементу.
С помощью этого псевдо-класса мы можем указать, что собираемся получить доступ к элементам checkbox, которые находятся в неопределенном состоянии.
"Неопределенное состояние" можно получить с помощью javascript кода.
Эти псевдо-классы используются указания стилей valid и invalid элементам форм, у которых задан тип (url, email, number, etc.)
С помощью этих двух псевдо-классов мы может получить доступ к первому и последнему дочернему элементу соответственно.
Применяется к родительскому элементу.
Псевдо-класс not позволяет указать что не должен содержать в себе селектор.
:not(h1) - все элементы, которые не является h1
input:not([type=button]) - все input, которые не являются button.
Этот псевдо-класс позволяет получить доступ к элементам по расположению элемента в дереве документа.
Применяется к элементу, который мы хотим получить.
odd - нечетный
even - четный
Аналогично nth-of-child, только выборка идет с конца дерева документа.
2n+1 - нечетный
2n - четный
Отличие этого псевдо-класса от nth-of-child состоит в том, что nth-of-type считает элементы того типа, который мы указываем перед этим псевдо-классом, а nth-of-child же считает все элементы и применят стили, если указанный элемент соответствует найденному.
<p>Paragraph 1</p>
<h1>Header</h1>
<p>Paragraph 2</p>
p:nth-of-child(2) - не применит стили ни к какому элементу.
p:nth-of-type(2) - применит стили к 2-ому параграфу.
С помощью этого псевдо-класса можно получить элемент, который является единственным типом для родительского элемента.
С помощью этого псевдо-класса можно получить элемент, который является единственным элементом для родительского элемента.
С помощью эти псевдо-классов можно получить элементы формы, которые являются опциональными или обязательными соответственно.
Используется атрибут required.
С помощью псевдо-класса readonly мы можем получить элемент, который имеет атрибут readonly, а с помощью read-write, соответственно, элемент, который мы можем изменять.
С помощью псевдо-класса root мы получаем ссылку на корневой элемент html
И на сладкое
Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции. Пока довольно экспериментальное свойство, и корректно поддерживаться только в google chrome.
div p - Указывает на все p внутри div при любом уровне вложенности
div > p - Указывает непосредственно на дочерний элемент p div'а
div + p - Указывает на p следующий непосредственно сразу после div
div ~ p - Указывает на все p следующий после div
div[class^="some"] - Позволяет найти div атрибут class которого начинается с текста "some"
div[class$="some"] - Позволяет найти div атрибут class которого заканчивается на текст "some"
div[class*="some"] - Позволяет найти div атрибут class которого содержит текст "some"
div[class~="some"] - Позволяет найти div атрибут class которого содержит текст "some", отделенный пробелом
div[class|="some"] - Позволяет найти div атрибут class которого содержит текст "some", отделенный тире
Что же касается IE которые не поддерживают CSS3 псевдо-классы, то есть замечательная js библиотека Selectivizr.
Спасибо. Все очень понятно.
ОтветитьУдалить