Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Рассмотрим их в статье подробнее. Некоторые селекторы поддерживаются всеми браузерами, некоторые только самыми новыми версиями браузеров.
Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding . На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.
Его также можно использовать для выделения всех дочерних элементов, определенного контейнера.
#container * { border: 1px solid black; }
В данном случае выделяться все дочерние элементы блока #container . Старайтесь не злоупотреблять им.
Совместимость
Знак решетки перед CSS-селектором выделит нам элемент с id="container" . Это очень просто, но будьте аккуратны при использовании id.
Спросите себя: мне абсолютно необходимо выделение по id?
id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов class="" , названий тэгов или даже псевдо-классов.
Совместимость
Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.
Совместимость
CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li . В этом случае используйте этот селектор.
Не следует делать CSS-селекторы вида Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.
Совместимость
Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {}
Совместимость
Мы используем псевдо-класс:link , для выделения всех ссылок, на которые еще не кликнули.
Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс:visited .
Совместимость
Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.
Совместимость
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.
CSS-селектор #container > ul выберет только ul , которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul , являющиеся дочерними элементами первых li .
Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.
Совместимость
Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.
Совместимость
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.
Совместимость
Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.
Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.
Совместимость
Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, http://yandex.ru/somepage и т.д.
Совместимость
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.
«^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.
Обратите внимание, что мы не ищем «http://». Это не правильно, поскольку не учитываются адреса, начинающиеся с https://
А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.
Совместимость
Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».
Совместимость
Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:
A, a, a, a { color: red; }
Но это геморрой и неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?
A { color: red; }
Совместимость
А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.
Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.
" Click Me
Вот, Html-код на месте, теперь напишем стили.
Неплохо, да?
Совместимость
Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.
Совместимость
Псевдоклассы:before и:after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.
Многие познакомились с этими псевдоклассами при работе с clear-fix hack.
Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
Этот хак использует:after чтобы добавить пробел после элемента, а запретить его обтекание.
Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.
Совместимость
Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.
Имейте в виду, что старые версии Internet Explorer применяют:hover только к ссылкам.
Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.
A:hover { border-bottom: 1pxsolidblack; }
border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;
Совместимость
Псевдокласс отрицания бывает очень полезным. Скажем, я хочу выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!
Или, если бы я хотел выбрать все элементы, за исключением p.
*:not(p) { color: green; }
Совместимость
Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.
Псевдо-элемент задается двумя двоеточиями: ::
Выбираем первую букву в параграфе
P::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right:2px; }
Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.
Выбираем первую строку в абзаце
P::first-line { font-weight: bold; font-size: 1.2em; }
Аналогичным образом благодаря::first-line мы задаем стиль первой строки в абзаце.
«Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and:after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации»
Совместимость
Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!
Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .
Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.
Совместимость
Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.
Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.
Совместимость
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.
Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.
Совместимость
Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.
Совместимость
Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.
Совместимость
В противоположность:first-child:last-child выбирает последний дочерний элемент.
Совместимость
Вы не часто встретите этот псевдокласс, тем не менее он существует.
Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
Один параграф.
Два параграфа
Два параграфа
Будет выбран p только первого div`a, потому что он единственный дочерний элемент.
Совместимость
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type .
Ul > li:only-of-type { font-weight: bold; }
Совместимость
first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.
Параграф
А теперь попытайтесь понять как выделить пункт 2.
Решение 1
Ul:first-of-type > li:nth-child(2) { font-weight: bold; }
Решение 2
P + ul li:last-child { font-weight: bold; }
Решение 3
Ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
Совместимость
В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые CSS-селекторы, которые поддерживает даже IE6, так и совсем новые CSS3-селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.
Начнем с самого простого, а потом уже перейдем к более продвинутым вещам.
Этот CSS-селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит броузер.
* также можно использовать для выделения дочерних элементов.
#container * { border: 1px solid black; }
В данном случае выделяться все дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.
Совместимость
Знак решетки перед CSS-селектором Х выделит нам элемент с id = Х. Это очень просто, но будьте аккуратны при использовании id.
Спросите себя: мне абсолютно необходимо выделение по id?
id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов, названий тэгов или даже псевдо-классов.
Совместимость
Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.
Совместимость
CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор.
Не следует делать CSS-селекторы вида Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.
Совместимость
Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {} .
Совместимость
Мы используем псевдо-класс:link, для выделения всех ссылок, на которые еще не кликнули.
Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс:visited.
Совместимость
Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.
Совместимость
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.
CSS-селектор #container > ul выберет только ul-ы, которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul-ы, являющиеся дочерними элементами первых li .
Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.
Совместимость
Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.
Совместимость
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.
Совместимость
Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.
Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на , а например на ? В этих случаях мы можем использовать регулярные выражения.
Совместимость
Совместимость
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.
“^” – наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.
Обратите внимание, что мы не ищем “http://”. Это не правильно, поскольку не учитываются адреса, начинающиеся с https://
А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.
Совместимость
Опять же, мы используем символ регулярного выражения “$” для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит “.jpg”.
Совместимость
Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:
A, a, a, a { color: red; }
Но это неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?
Ссылка на изображение
A { color: red; }
Совместимость
А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.
Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.
Click Me
Вот, Html-код на месте, теперь напишем стили.
Неплохо, да?
Совместимость
Совместимость
Псевдоклассы:before и:after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.
Многие познакомились с этими псевдоклассами при работе с clear-fix hack.
Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
Этот хак использует:after чтобы добавить пробел после элемента и запретить его обтекание.
Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.
Совместимость
Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS -селектор для вас.
Имейте в виду, что старые версии Internet Explorer применяют:hover только к ссылкам.
Этот CSS -селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.
A:hover { border-bottom: 1px solid black; }
border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;
Совместимость
Псевдокласс отрицания бывает очень полезным. Скажем, нужно выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!
Или, если необходимо выбрать все элементы, за исключением p.
*:not(p) { color: green; }
Совместимость
Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.
Псевдо-элемент задается двумя двоеточиями: ::
Выбираем первую букву в параграфе
P::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right:2px; }
Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.
Выбираем первую строку в абзаце
P::first-line { font-weight: bold; font-size: 1.2em; }
Аналогичным образом благодаря::first-line мы задаем стиль первой строки в абзаце.
“Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and:after) . Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации”
Совместимость
Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!
Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .
Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0} .
Совместимость
Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child .
Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.
Совместимость
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.
Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul , не имеющему уникального id , нужно использовать nth-of-type .
Совместимость
Мы можем также использовать nth-last-of-type , отсчитывая элементы с конца.
Совместимость
Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.
Совместимость
В противоположность :first-child:last-child выбирает последний дочерний элемент.
Совместимость
Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
Один параграф.
Два параграфа
Два параграфа
Будет выбран p только первого div`a, потому что он единственный дочерний элемент.
Совместимость
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type .
Ul > li:only-of-type { font-weight: bold; }
Совместимость
first-of-type выбирает первый элемент заданного типа.
Чтобы лучше понять, приведем
Параграф
А теперь попытайтесь понять как выделить пункт 2.
Решение 1
Ul:first-of-type > li:nth-child(2) { font-weight: bold; }
Решение 2
P + ul li:last-child { font-weight: bold; }
Решение 3
Ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
Совместимость
Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:
Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег , значит идем на страницу style.css и пишем следующий код:
body{ background: blue; }
Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:
body{ background: blue; color: white; }
Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):
body{ background: blue; color: white; } h1{ color:red; } h2{ color:yellow; }
Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.
Думаю, принцип уже понятен: мы указываем селектор, т.е. элемент, к которому применяется стиль, а в фигурных скобках - его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки, пока же мы рассматриваем общий принцип составления таблицы стилей.
В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них - розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.
В HTML идентификатор элемента задается при помощи параметра id , в качестве значения которого указывается уникальное имя. Например:
Текст параграфа с идентификатором (id).
Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор: Если посмотреть сейчас на нашу страницу в браузере, то наши абзацы оба белого цвета. Добавим в таблицу стилей (style.css) стили для наших абзацев:
body{ background: blue; color: white; } h1{ color:red; } h2{ color:yellow; } p{ color:black; } p#pink{ color:pink; }
Мы сначала указали сделать текст всех параграфов черным, а текст параграфа с id "pink" сделать розовым. Наш селектор состоит в данном случае из элемента (p ), разделителя (# ) и имени идентификатора (pink ).
Важно запомнить, что на странице может быть только один идентификатор (id). Т.е. для нашего примера нельзя создать два параграфа с id "pink" , параграф с таким id может быть только один. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей.
Селекторы по классу
В примере выше мы создали параграф с розовым цветом текста и указали, что такой id может быть только один. Но, что делать, если мы хотим, чтобы розовый цвет текста был у двух или трех параграфов. Для этого в HTML существует параметр class , в качестве значения которого указывается его имя.
Давайте добавим в нашу html-страницу еще пару параграфов и присвоим им class="pink" : Для того, чтобы указать стиль для этого класса, в таблице стилей напишем правило, где в качестве селектора снова будет использоваться элемент p и имя pink , но в данном случае это имя класса, поэтому в качестве разделителя будет использоваться точка (.):
body{ background: blue; color: white; } h1{ color:red; } h2{ color:yellow; } p{ color:black; } p#pink{ color:pink; } p.pink{ color:pink; }
Абзацев с таким классом может быть сколько угодно.
Давайте подведем промежуточный итог:
Red{ color:red; } #yellow{ color:yellow; }
Таким образом, какому бы элементу мы не задали class="red" (заголовку, параграфу или ссылке), цвет текста у него станет красным. Одному элементу на странице (любому) мы можем задать id="yellow" и цвет текста этого элемента станет желтым.
Контекстный селектор
Пусть у нас есть html-страница вот с таким кодом: Мы хотим, чтобы курсив был выделен еще и зеленым цветом. Тогда в таблицу стилей мы запишем селектор по элементу, т.е.
i{ color:green; }
Сейчас наша страница в браузере выглядит так:
Но что, если мы захотим, чтобы не весь курсивный текст выделялся зеленым, а лишь тот, который находится в параграфах. Для этого мы внесем изменения в таблицу стилей:
p i{ color:green; }
Так мы указали, применять данный стиль к элементам i , которые находятся в элементах p . Названия элементов при этом отделяются пробелом. Такие селекторы называют контекстными . Теперь наша страница в браузере выглядит так:
Группировка селекторов
Если блоки объявления стилей для нескольких селекторов совпадают (например, мы хотим, чтобы заголовки первых трех уровней были зеленого цвета), то их можно сгруппировать. Для этого селекторы, к которым будет применяться один стиль, нужно перечислить через запятую. Пример:
h1, h2, h3{ color:green; }
Предположим, что кроме цвета, мы хотим задать нашим заголовкам размер. Тогда мы можем просто дописать в нашу таблицу стилей:
h1, h2, h3{ color:green; } h1{ font-size:18px; } h2{ font-size:16px; } h3{ font-size:14px; }
У наших заголовков будет указанный размер, но все они будут зеленого цвета.
Вообще-то, насчет группировок имеются разногласия. Одни считают правильным вышеприведенный код, т.к. группировка помогла избежать повтора одинакового свойства для трех элементов, это сокращает код.
Другие считают, что таким образом, ухудшается логичность кода. Так как, найдя селектор для заголовка h3, не сразу понятно, почему текст в нем зеленого цвета. Сторонники логики рекомендуют группировать только элементы, у которых блоки описаний полностью совпадают.
В общем, группировать или нет, дело вашего вкуса. Но вы должны помнить о разных подходах, когда будете читать чужой код, например, в шаблонах.
На этом урок, посвященный селекторам, закончен. В следующем уроке познакомимся с такими понятиями, как псевдоэлементы и псевдоклассы.
Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.
К простым селекторам относятся:
| CSS селектор | Пример | Описание | CSS |
|---|---|---|---|
| .class | .myClass | Выбирает все элементы с классом myClass (class="myClass"). | 1 |
| #id | #main | Выбирает элемент с идентификатором main (id="main"). | 1 |
| * | Выбор всех элементов. | 2 | |
| элемент | span | Выбор всех элементов . | 1 |
| элемент,элемент | div,span | Выбор всех элементов и всех элементов .
|
1 |
| [атрибут] | Выбирает все элементы с атрибутом title . | 2 | |
| [атрибут="значение"] | Выбирает все элементы с атрибутом title , значение которого в точности совпадает со значением указанным в селекторе (title="cost"). | 2 | |
| [атрибут~="значение"] | Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два"). | 2 | |
| [атрибут|="значение"] | Выбор всех элементов с атрибутом lang , значение которого начинается с "ru". | 2 | |
| [атрибут^="значение"] | a | Выбор каждого элемента с атрибутом href , значение которого начинается с "https". | 3 |
| [атрибут$="значение"] | Выбирает все элементы с атрибутом src , значение которого оканчивается на ".png" (src="some_img.png"). | 3 | |
| [атрибут*="значение"] | Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два"). | 3 |
Составной селектор - это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.
Span.className p.className1.className2#someId:hover
Сложный селектор - это последовательность селекторов, которые разделены комбинаторами.
Список селекторов - это селекторы, перечисленные через запятую.
Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.
Псевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом.
| Псевдо-класс | Пример | Описание | CSS |
|---|---|---|---|
| :link | a:link | Выбор всех не посещенных ссылок. | 1 |
| :visited | a:visited | Выбор всех посещенных ссылок. | 1 |
| :active | a:active | Выбор активной ссылки. | 1 |
| :hover | a:hover | Выбор ссылки при наведении курсора мышки. | 1 |
| :focus | input:focus | Выбор элемента , который находится в фокусе. | 2 |
| :first-child | p:first-child | Выбор каждого элемента Который является первым дочерним элементом своего родителя. |
2 |
| :lang(язык) | p:lang(ru) | Выбор каждого элемента С атрибутом lang , значение которого начинается с "ru". |
2 |
| :first-of-type | p:first-of-type | Выбор каждого элемента Который является первым из элементов
|
3 |
| :last-of-type | p:last-of-type | Выбор каждого элемента Который является последним из элементов Своего родительского элемента. |
3 |
| :only-of-type | p:only-of-type | Выбор каждого элемента Который является единственным элементом Своего родительского элемента. |
3 |
| :only-child | p:only-child | Выбор каждого элемента Который является единственным дочерним элементом своего родительского элемента. |
3 |
| :nth-child(n) | p:nth-child(2) | Выбор каждого элемента Своего родительского элемента. |
3 |
| :nth-last-child(n) | p:nth-last-child(2) | Выбор каждого элемента Который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. |
3 |
| :nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента Который является вторым дочерним элементом Своего родительского элемента. |
3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбор каждого элемента Который является вторым дочерним элементом Своего родительского элемента, считая от последнего дочернего элемента. |
3 |
| 3 | |||
| :not(селектор) | :not(p) | Выбор всех элементов, кроме элемента . |
3 |
Псевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.
Пример 17.1. Стиль для каждого селектора
H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; } H2 { font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #333; } H3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #900; } P { font-family: Times, serif; }
Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2.
Пример 17.2. Сгруппированные селекторы
H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; } H1 { font-size: 160%; color: #003; } H2 { font-size: 135%; color: #333; } H3 { font-size: 120%; color: #900; }
В данном примере font-family единое для всех селекторов применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются к каждому селектору отдельно.
Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий.
Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }
При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.
1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?
Bgzapas, .button, h1 { font-size: 1.2em; padding: 10px; background-color: #fcfaed; } .bgzapas { background-color: #e7f2d7; } .button, h2 { width: 95px; font-size: 11px; color: #f3fced; background-color: #5ca22e; } .bgzapas, .button { background-color: #d9d7f2; }
