CSS-селекторы. CSS селекторы – что это, зачем нужны и какими они бывают
Последнее обновление: 21.04.2016
Определение стиля начинается с селектора. Например:
Div{ width:50px; /* ширина */ height:50px; /* высота */ background-color:red; /* цвет фона */ margin: 10px; /* отступ от других элементов */ }
В данном случае селектором является div . Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д. При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет применяться ко всем элементам
Селекторы CSS
Здесь на странице 3 элемента div, и все они будут стилизованы:
Классы
Иногда для одних и тех же элементов требуется различная стилизация. И в этом случае мы можем использовать классы.
Для определения селектора класса в CSS перед названием класса ставится точка:
RedBlock{ background-color:red; }
Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинать название класса должно обязательно с буквы.
Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.
После определения класса мы можем его применить к элементу с помощью атрибута class . Например:
Определим и используем несколько классов:
Классы CSS
Идентификаторы
Для идентификации уникальных на веб-станице элементов используются идентификаторы, которые определяются с помощью атрибутов id. Например, на странице может быть головной блок или шапка:
Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:
Однако стоит заметить, что идентификаторы в большей степени относятся к структуре веб-странице и в меньшей степени к стилизации. Для стилизации преимущественно используются классы, нежели идентификаторы.
Универсальный селектор
Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор , который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:
*{ background-color: red; }
Стилизация группы селекторов
Иногда определенные стили применяются к целому ряду селекторов. Например, мы хотим применить ко всем заголовкам подчеркивание. В этом случае мы можем перечислить селекторы всех элементов через запятую:
CSS3
Селекторы
Группа селекторов
Селекторы
Группа селекторов
Некоторый текст...
Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:
H1, #header, .redBlock{ color: red; }
Селектор в CSS — это указатель на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов:
1. Селекторы по тэгам : h1
2. Селектор по id : #main
3. Селекторы по классам : .hidden
4. Селектор по нескольким классам
Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс.hidden и класс.closed .
Hidden.closed
5. Контекстные селекторы
Разделяются пробелом. Такие селекторы используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.
P strong ul .selected .header .menu a
6. Соседние селекторы
Выделяет последующий элемент. Записываются с помощью знака + . Читается как: применить свойства к селектор2 который должен быть сразу после селектор1 .
Стили применяются к элементу, подходящему под селектор2 , только если перед ним расположен элемент, подходящий под селектор1 .
... .green + .selected {}
В примере.green + .selected применит стили ко второму элементу, т.к. перед ним есть элемент с классом.green . Селектор.green + li тоже применит стили ко второму элементу, а селектор.selected + .green не сработает.
7. Родственные селекторы
Выделяет последующие элементы. Похожи на предыдущий, но с тем различием, что выбираются все следующие элементы , а не только первый элемент.
- item
Selected too
Not selected ... ul ~ p {}В данном примере будут выбраны все элементы p, идущие за ul. В то время, как при использовании селектора ul + p будет выбран только первый элемент.
8. Дочерние селекторы
Записываются с помощью знака > и распространяются только на элементы первого уровня вложенности. На элементы вложенные в другие элементы не распространяются.
Ul > li {}
В случае контекстных селекторов они влияют на всех потомков (например если задать ul li) что не всегда удобно. Дочерние селекторы позволяют задать стили только для элементов первого уровня вложенности.
ul > li означает то же, что и ul li , но выбираются только li первого уровня вложенности, которые напрямую являются вложенными в ul. На li вложенные в другие дочерные li элементы, правила уже не будут действовать.
9. Селекторы атрибутов
Чаще всего используются при работе с формами. Селекторы атрибутов записываются с использованием квадратных скобок элемент[атрибут] .
Примеры селекторов атрибутов:
Input input div a a a a
В примере выше ~ позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой, например из:
10. Глобальный селектор
Селектор * выберет все элементы. Его также можно использовать для выделения дочерних элементов:
* { margin: 0; padding: 0; } .content * { outline: none; }
11. Псевдоклассы
Примеры псевдоклассов:
A:link a:visited a:active a:hover input:checked .clearfix:after {} div:not(#container) p::first-line p::first-letter
Псевдокласс отрицания:not бывает очень полезным. Например, когда необходимо выбрать все div, за исключением того, который имеет id container.
Что такое селектор в css – это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы.
1) .Х
.topic-title { background-color: yellow; }CSS селектор по классу Х . Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.
- Chrome
- Firefox
- Safari
- Opera
2) #X
#content { width: 960px; margin: 0 auto; }CSS селектор по id . Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
3) *
* { margin: 0; padding: 0; }CSS селектор всех элементов . Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.
Символ * также можно использовать чтобы выделить все дочерние элементы:
#header * { border: 5px solid grey; }
В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
4) X
a { color: green; } ol { margin-left: 15px; }CSS селектор типа . Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
5) Х Y
li a { font-weight: bold; text-decoration: none; }CSS селектор потомков или CSS селектор дочерних элементов используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор. Используя цепочки таких селекторов, всегда спрашивайте себя, а можно ли для выделения данного элемента использовать еще более короткую последовательность селекторов.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
6) Х + Y
div + p { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; }Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.
- Какими браузерами поддерживается:
- IE7 +
- Firefox
- Chrome
- Safari
- Chrome
7) Х > Y
#content > ul { border: 1px solid green; }CSS селектор потомков . Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:
- Элемент списка
- Потомок первого элемента списка
- Элемент списка
- Элемент списка
CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
8) Х ~ Y
ol ~ p { margin-left: 10px; }Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
Псевдо-класс:link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс:visited .
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
10) X
a { color: red; }CSS селектор по атрибуту . В этом примере выбираются только те ссылки, у которых есть атрибут title.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
11) X
a { color: yellow; }- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
12) X
a { color: #dfc11f; }Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
13) X
a { background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; }На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
14) X
a { color: green; }Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
15) X
a { color: green; }Здесь мы применяем CSS селектор по пользовательскому атрибуту . Добавляем наш собственный атрибут data-filetype в каждую ссылку:
ссылка
Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
16) X
Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.
ссылка
С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:
/* Выбрать элемент, атрибут data-info которого содержит значение external */ a { color: green; } /* Выбрать элемент, атрибут data-info которого содержит значение image */ a { border: 2px dashed black; }
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
17) X:checked
input:checked { border: 3px outset black; }Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
18) X:after
Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.
Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
19) X:hover
div:hover { background-color: rgba(11,77,130,0.5); }Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.
A:hover { border-bottom: 1px dotted blue; }
- Какими браузерами поддерживается:
- IE6+ (В IE6 применимо только к ссылкам)
- Chrome
- Firefox
- Safari
- Opera
20) X:not(selector)
div:not(#content) { color: grey; }Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .
По такому же принципу можно выбрать все элементы кроме p:
*:not(p) { color: blue; }
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
21) X::pseudoElement
p::first-line { font-weight: bold; font-size: 24px; }Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов – к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам.
Выбор первой буквы параграфа:
P::first-letter { font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; }
Выбор первой строки в параграфе:
P:first-line { font-size: 28px; font-weight: bold; }
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
22) X:first-child
ul li:first-child { border-top: none; }Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1 .
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera 3.5+
- Android
23) X:last-child
ul > li:last-child { border-bottom: none; }Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3 .
- Какими браузерами поддерживается:
- IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
- Chrome
- Firefox
- Safari
- Opera 9.6+
- Android
24) X:only-child
div p:only-child { color: green; }Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari 3.0+
- Opera 9.6+
- Android
25) X:nth-child(n)
li:nth-child(3) { color: black; }Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3 .
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
26) X:nth-last-child(n)
li:nth-last-child(2) { color: red; }Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child . Этот метод такой же как и предыдущий, но отсчет ведется с конца.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
27) X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px dotted black; }Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
28) X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 2px ridge blue; }Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
29) X:only-of-type
li:only-of-type { font-weight: bold; }Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
30) X:first-of-type
ul:first-of-type > li:nth-child(3) { font-style: italic; }Псевдокласс first-of-type выбирает первый элемент заданного типа.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.5+
- Android 2.1+
- iOS 2.0+
". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS. Рис.2. Пример правила CSS.
Коротко про синтаксис записи правил CSS:
- Объявление стиля в парвиле берётся в фигурные скобки - {}
- Свойство и значение в объявлении разделяются двоеточием - :
- В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
- В конце каждой пары свойство: значение ставится точка с запятой - ;
- После последней пары свойство: значение точку с запятой ставить не обязательно.
- Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
- Синтаксис CSS не чувствителен к регистру символов.
В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.
Селекторы тегов
Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.
Привет!
Заголовок h2!
Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков
,
и
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
Привет h1!
Заголовок h2!
Такая запись стиля равносильна следующей группе правил:
Селекторы потомков
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам
Внутри таблицы
Привет!Текст абзаца в таблице. |
Текст абзаца вне таблицы.
Все теги
Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег
Находящийся внутри тега
На самом деле, вместо
, так как тег
|