| Селектор | Описание, пример |
|---|---|
| Универсальный | Универсальный селектор соответствует любому элементу, например, следующая запись обнулит отступы для всех элементов веб-сайта: * {margin: 0;} |
| Элемента | Селекторы элементов используются для определения стилей элементов для всех страниц веб-сайта, например, стиль заголовков h1 или общий стиль абзацев: h1 {font-family: Lobster, cursive;} p {letter-spacing: 0.1em;} |
| Класса |
Селекторы класса используются для определения стилей для нескольких элементов одного типа, размещенных в разных частях или на разных страницах веб-сайта. |
| Идентификатора | Селекторы идентификатора используются для присваивания стиля [b]одному[/b] конкретному элементу. Идентификатор id элемента можно использовать в документе только один раз, так как он выделяет уникальный элемент. #sidebar { text-transform: uppercase; color: lightblue;} |
| Потомка | К потомкам элемента относятся его дочерние элементы. Селекторы потомков позволяют стилизовать все вложенные элементы, например, можно отформатировать внешний вид элементов маркированного списка: ul li {text-transform: uppercase;} – выберет все элементы li, являющиеся потомками всех элементов ul. Если нужно отформатировать потомки определенного элемента, то можно задать ему стилевой класс: p.first a {color: green;} – означает, что нужно применить данный стиль ко всем ссылкам, потомкам абзаца, относящегося к классу с именем first; p .first a {color: green;} -если добавить пробел, то будут выбраны ссылки, расположенные внутри любого тега класса .first, который является потомком элемента <p>; .first a {color: green;} – данный стиль применяется к любой ссылке, расположенной внутри других тегов, обозначенных классом .first. |
| Дочерний | Дочерний тег является прямым потомком содержащего его тега, т.е. отношения "родители-дети” существуют между элементами и теми элементами, которые содержатся непосредственно внутри них. У одного элемента может быть несколько дочерних элементов, а родительский элемент может быть у каждого элемента только один. p > strong – выбирает все элементы strong, являющиеся дочерними по отношению к элементу p. |
| Сестринский | Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать теги из группы элементов одного уровня. h1 + p – выберет все первые абзацы, идущие непосредственно за любым тегом <h1>, не затрагивая остальные абзацы. h1 ~ p – выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие после него. |
| Атрибута | Селекторы атрибутов позволяют форматировать элементы на основе выборки любых содержащихся в них атрибутов или значений атрибутов, варианты: [атрибут] – выбирает все элементы, для которых задан указанный атрибут. img[alt] – выбирает все картинки, содержащие атрибут alt. img[title="flower"] – выбирает все картинки, название которых содержит слово flower. a[href^="http://"] – выбирает все ссылки, начинающиеся на http://. img[src$=".png"] – выбирает все картинки, название которых заканчивается на .png. a[href*="ru"] – выбирает все ссылки, название которых содержит слово ru. input[type="text"] – выбирает только текстовые поля формы. article[class~="feature"] – выбирает статьи по частичному значению атрибута, т.е. статьи, название класса которых содержит данное слово. article[id|="feature"] – выбирает элемент, атрибут которого эквивалентен feature или начинается на feature. |
| Псевдокласс | Псевдоклассы – это классы, фактически не прикрепленные к тегам html-кода. Они вызывают CSS-правила при совершении того или иного события или подчиняющиеся тому или иному правилу: a:link – ссылается на не посещенную ссылку. a:visited – ссылается на уже посещенную ссылку. a:hover – ссылается на любой элемент, по которому проводят курсором мыши. a:focus – ссылается на любой элемент, над которым находится курсор мыши. a:active – ссылается на элемент, который был активизирован пользователем. :valid – выберет поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу. :invalid – выберет поля формы, содержимое которых не соответствует указанному типу. :enabled – выберет все доступные (активные) поля форм. :disabled – выберет заблокированные поля форм, т.е., находящиеся в неактивном состоянии. :in-range – выберет поля формы, значения которых находятся в заданном диапазоне. :out-of-range – выберет поля формы, значения которых не входят в установленный диапазон. :lang() – выбирает абзацы на указанном языке. :not(селектор) – выберет элементы, которые не содержат указанный селектор, например, класс, идентификатор или селектор элемента :not([type="submit"]). :target – выбирает элемент с символом #, на который ссылаются в документе. :checked – выбирает выделенные (выбранные пользователем) элементы. |
| Структурные псевдоклассы | Структурные псевдоклассы форматируют дочерние элементы в соответствии с указанным параметром в скобке, варианты: :nth-child(odd) – выбирает нечетные дочерние элементы. :nth-child(even) – выбирает четные дочерние элементы. :nth-child(3n) – выбирает каждый третий элемент среди дочерних. :nth-child(3n+2) – выбирает каждый третий элемент, начиная со второго дочернего элемента (+2). :nth-child(n+2) – выбирает все элементы, начиная со второго. :nth-child(3) – выбирает третий дочерний элемент. :nth-last-child() – в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с :nth-child(), но начиная с последнего, в обратную сторону. :first-child – позволяет оформить только самый первый дочерний элемент тега. :last-child – позволяет форматировать последний дочерний элемент тега. :only-child – выбирает элемент, являющийся единственным дочерним элементом. :empty – выбирает элементы, у которых нет дочерних элементов. :root – выбирает элемент, являющийся корневым в документе (элемент html). |
| Структурные псевдоклассы типа | Позволяют указать на конкретный тип дочернего тега: :nth-of-type() – выбирает элементы по аналогии с :nth-child(), при этом берет во внимание только тип элемента. :first-of-type – позволяет выбрать первый дочерний элемент. :last-of-type – выбирает последний тег конкретного типа. :nth-last-of-type() – выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца. :only-of-type – выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента. |
| Псевдоэлементы | Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content, и для изменения внешнего вида части элемента: :first-letter – выбирает первую букву каждого абзаца, применяется только к блочным элементам. :first-line – выбирает первую строку текста элемента, применяется только к блочным элементам. :before – вставляет генерируемое содержимое перед элементом. :after – добавляет генерируемое содержимое после элемента. |