Css3 все селекторы в одном списке. Что вы не знали о селекторах CSS? — выделение всех элементов
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>
Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Рассмотрим их в статье подробнее. Некоторые селекторы поддерживаются всеми браузерами, некоторые только самыми новыми версиями браузеров.
1.
* — выделение всех элементов
* {
margin: 0;
padding: 0;
}
Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding . На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.
Его также можно использовать для выделения всех дочерних элементов, определенного контейнера.
#container * {
border: 1px solid black;
}
В данном случае выделяться все дочерние элементы блока #container . Старайтесь не злоупотреблять им.
Совместимость
IE6 +
Firefox
Chrome
Safari
Opera
2.
#X
#container {
width: 960px;
margin: auto;
}
Знак решетки перед CSS-селектором выделит нам элемент с id="container" . Это очень просто, но будьте аккуратны при использовании id.
Спросите себя: мне абсолютно необходимо выделение по id?
id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов class="" , названий тэгов или даже псевдо-классов.
Совместимость
IE6 +
Firefox
Chrome
Safari
Opera
3 .Х
.error {
color: red;
}
Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.
Совместимость
IE6 +
Firefox
Chrome
Safari
Chrome
4.
Х
Y
li a {
text-decoration: none;
}
CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li . В этом случае используйте этот селектор.
Не следует делать CSS-селекторы вида
Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.
Совместимость
IE6 +
Firefox
Chrome
Safari
Chrome
5. X
a { color: red; }
ul { margin-left: 0; }
Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {}
Мы используем псевдо-класс:link , для выделения всех ссылок, на которые еще не кликнули.
Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс:visited .
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
7.
Х
+Y
ul + p { color: red; }
Выделяет последующий элемент. Он будет выбирать только
элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.
Совместимость
IE7 +
Firefox
Chrome
Safari
Chrome
8.
Х
>Y
div#container > ul { border: 1pxsolidblack; }
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.
Элемент списка
Дочерний элемент
Элемент списка
Элемент списка
Элемент списка
CSS-селектор #container > ul выберет только ul , которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul , являющиеся дочерними элементами первых li .
Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
9.
Х
~ Y
ul ~ p { color: red; }
Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
10.
X
a { color: green; }
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
11.
X
a { color: #ffde00; }
Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.
Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.
Совместимость
IE7 +
Firefox
Chrome
Safari
Chrome
12.
X
a { color: # 1f6053; }
Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь
в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, http://yandex.ru/somepage
и т.д.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
13.
X
a {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.
«^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.
Обратите внимание, что мы не ищем «http://». Это не правильно, поскольку не учитываются адреса, начинающиеся с https://
А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец
строки.
Совместимость
IE7 +
Firefox
Safari
Опера
14.
X
a { color: red; }
Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».
Совместимость
IE7 +
Firefox
Safari
Опера
15.
X
a{ color: red; }
Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:
A,
a,
a,
a {
color: red;
}
Но это геморрой и неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?
Ссылка на изображение
A { color: red; }
Совместимость
IE7 +
Firefox
Safari
Опера
16.
X
a { color: red; }
a { border: 1pxsolidblack; }
А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.
Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.
" Click Me
Вот, Html-код на месте, теперь напишем стили.
Неплохо, да?
Совместимость
IE7 +
Firefox
Safari
Опера
17.
X:checked
input:checked { border:1pxsolidblack; }
Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.
Совместимость
IE9 +
Firefox
Safari
Опера
18.
X:after
Псевдоклассы:before и:after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.
Многие познакомились с этими псевдоклассами при работе с clear-fix hack.
Этот хак
использует:after чтобы добавить пробел после элемента, а запретить его обтекание.
Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.
Совместимость
IE8 +
Firefox
Safari
Опера
19.
X:hover
div:hover { background: #e3e3e3; }
Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.
Имейте в виду, что старые версии Internet Explorer применяют:hover только к ссылкам.
Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.
A:hover { border-bottom: 1pxsolidblack; }
border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;
Совместимость
IE6 + (В IE6: hover должен быть применен к ссылке)
Firefox
Safari
Опера
20.
X:not(selector)
div:not(#container) { color: blue; }
Псевдокласс отрицания бывает очень полезным. Скажем, я хочу выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!
Или, если бы я хотел выбрать все элементы, за исключением p.
*:not(p) { color: green; }
Совместимость
IE9 +
Firefox
Safari
Опера
21.
X::
псевдо
элемент
Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.
Аналогичным образом благодаря::first-line мы задаем стиль первой строки в абзаце.
«Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and:after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации»
Совместимость
IE6 +
Firefox
Safari
Опера
22.
X:nth-child(n)
li:nth-child(3) { color: red; }
Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!
Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .
Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.
Совместимость
IE9 +
Firefox 3,5 +
Safari
23.
X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.
Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
24.
X:nth-of-type(n)
ul:nth-of-type(3) { border: 1pxsolidblack; }
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.
Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.
Совместимость
IE9 +
Firefox 3,5 +
Safari
25.
X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1pxsolidblack; }
Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
26.
X:first-child
ul li:first-child { border-top: none; }
Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.
Совместимость
IE7 +
Firefox
Safari
Опера
27.
X:last-child
ul > li:last-child { color: green; }
В противоположность:first-child:last-child выбирает последний дочерний элемент.
Совместимость
IE9 + (Да да, IE8 поддерживает:first-child , но не поддерживает:last-child . Microsoft-у привет!)
Firefox
Safari
Опера
28.
X:only-child
div p:only-child { color: red; }
Вы не часто встретите этот псевдокласс, тем не менее он существует.
Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
Один параграф.
Два параграфа
Два параграфа
Будет выбран p только первого div`a, потому что он единственный дочерний элемент.
Совместимость
IE9 +
Firefox
Safari
Опера
29.
X:only-of-type
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type .
Ul > li:only-of-type { font-weight: bold; }
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
30.
X:first-of-type
first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.
Что такое селектор в 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.
Псевдо-класс: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 очень полезные – они создают контент до и после выбранного элемента.
Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .
Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов – к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам.
Псевдокласс 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.
Псевдокласс 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.
Псевдокласс first-of-type
выбирает первый элемент заданного типа.
Какими браузерами поддерживается:
Chrome
Firefox 3.5+
Safari 3.1+
Opera 9.5+
Android 2.1+
iOS 2.0+
CSS содержит правила стиля, которые интерпретируются браузером, а затем применяются к соответствующим элементам вашего документа. Правило стиля состоит из трех частей:
Селектор
- это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,
или
и т.д.
Свойство
- это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
Значение
- задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.
Синтаксис селекторов в CSS следующий:
Селектор { свойство: значение }
Пример.
Вы можете задать границу таблицы следующим образом:
Table {
border: 2px solid #FF8C00;
}
Здесь синтаксис селектора такой: table - это селектор, а border - свойство, а 2px solid #FF8C00 - значение этого свойства.
Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.>
Стандартные селекторы
Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:
H1 {
color: #8B4513;
}
Универсальные селекторы
Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента:
* {
color: #808080;
}
Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.
Селекторы потомков или вложенные селекторы
Предположим, Вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента, то в этом Вам помогут вложенные селекторы или селекторы потомков. Как показано в следующем примере, правило стиля будет применяться к элементу только тогда, когда оно находится внутри тега
.
Ul em {
color: #CD5C5C;
}
Селекторы класса
Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.
Blue {
color: #0000FF;
}
class="blue"
. Вы можете сделать селектор класса немного более конкретным. Например:
H1.blue {
color: #0000FF;
}
с атрибутом class="blue"
.
Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:
Этот абзац будет оформлен классами center
и bold
.
ID селекторы
Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.
#blue {
color: #0000FF;
}
Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id="blue"
. Вы можете сделать id селектор немного более конкретным. Например:
H1#blue {
color: #0000FF;
}
Это правило отображает содержимое в синем цвете только для элементов
с атрибутом id="blue"
.
Истинная мощность id селекторов - это когда они используются в качестве основы для селекторов-потомков, например:
#blue h2 {
color: #0000FF;
}
В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id="blue"
.
Дочерние селекторы
Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:
Body > p {
color: #0000FF;
}
Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом
. Другие абзацы, помещенные внутри других элементов типа
или
Соседние селекторы
HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:
Strong + em {
color: #0000FF;
}
Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.
Селекторы атрибутов
Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:
Input {
color: #0000FF;
}
Преимущество использования селекторов атрибутов заключается в том, что элемент не изменяется, а цвет применяется только к нужным текстовым полям.
Для селектора атрибутов применяются следующие правила:
p - выбирает все элементы абзаца с атрибутом lang.
p - выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
p - выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
p - выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».
Несколько правил стиля
Возможно, Вам потребуется определить несколько правил стиля для одного элемента. Вы можете задать эти правила для объединения нескольких свойств и соответствующих значений в один блок, как показано в следующем примере:
Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.
Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.
Группировка селекторов в CSS
Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как показано в следующем примере:
Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.
Вы можете группировать различные id селектора вместе, как показано ниже:
При создании стиля для сайта, когда одновременно используется множество селекторов,
возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни
и те же элементы, их можно сгруппировать для удобства представления и сокращения
кода. В примере 17.1 показана обычная запись, здесь для каждого селектора приводится
свой набор стилевых свойств.
Из данного примера видно, что стиль для тегов заголовков содержит одинаковое
значение font-family
. Группирование как раз и позволяет
установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2.
В данном примере font-family
единое для всех селекторов
применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются
к каждому селектору отдельно.
Селекторы группируются в виде списка тегов, разделенных между собой запятыми.
В группу могут входить не только селекторы тегов, но также идентификаторы и
классы. Общий синтаксис следующий.
Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }
При такой записи правила стиля применяются ко всем селекторам, перечисленным
в одной группе.
Вопросы для проверки
1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?
В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые CSS-селекторы, которые поддерживает даже IE6, так и совсем новые CSS3-селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.
1.
* { margin: 0; padding: 0; }
Начнем с самого простого, а потом уже перейдем к более продвинутым вещам.
Этот CSS-селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит броузер.
* также можно использовать для выделения дочерних элементов.
#container * { border: 1px solid black; }
В данном случае выделяться все дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.
Совместимость
IE6 +
Firefox
Chrome
Safari
Opera
2. #X
container { width: 960px; margin: auto; }
Знак решетки перед CSS-селектором Х выделит нам элемент с id = Х. Это очень просто, но будьте аккуратны при использовании id.
Спросите себя: мне абсолютно необходимо выделение по id?
id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов, названий тэгов или даже псевдо-классов.
Совместимость
IE6 +
Firefox
Chrome
Safari
Opera
3 .Х
error { color: red; }
Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.
Совместимость
IE6 +
Firefox
Chrome
Safari
Chrome
4. Х Y
li a { text-decoration: none; }
CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор.
Не следует делать CSS-селекторы вида
Х Y Z A B.error
. Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.
Совместимость
IE6 +
Firefox
Chrome
Safari
Chrome
5. X
a { color: red; }
ul { margin-left: 0; }
Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {} .
Мы используем псевдо-класс:link, для выделения всех ссылок, на которые еще не кликнули.
Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс:visited.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
7. Х+Y
ul + p { color: red; }
Выделяет последующий элемент. Он будет выбирать только
элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.
Совместимость
IE7 +
Firefox
Chrome
Safari
Chrome
8. Х>Y
div#container > ul { border: 1px solid black; }
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.
Элемент списка
Дочерний элемент
Элемент списка
Элемент списка
Элемент списка
CSS-селектор #container > ul выберет только ul-ы, которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul-ы, являющиеся дочерними элементами первых li .
Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
9. Х ~ Y
ul ~ p { color: red; }
Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
10. X
a { color: green; }
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
11. X
a { color: #ffde00; }
Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.
Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на , а например на ? В этих случаях мы можем использовать регулярные выражения.
Совместимость
IE7 +
Firefox
Chrome
Safari
Chrome
12. X
a { color: # 1f6053; }
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
13. X
a {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.
“^” – наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.
Обратите внимание, что мы не ищем “http://”. Это не правильно, поскольку не учитываются адреса, начинающиеся с https://
А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец
строки.
Совместимость
IE7 +
Firefox
Safari
Опера
14. X
a { color: red; }
Опять же, мы используем символ регулярного выражения “$” для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит “.jpg”.
Совместимость
IE7 +
Firefox
Safari
Опера
15. X
a{ color: red; }
Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:
A,
a,
a,
a {
color: red;
}
Но это неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype
в каждую ссылку?
Ссылка на изображение
A { color: red; }
Совместимость
IE7 +
Firefox
Safari
Опера
16. X
a { color: red; }
a { border: 1px solid black; }
А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.
Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.
Click Me
Вот, Html-код на месте, теперь напишем стили.
Неплохо, да?
Совместимость
IE7 +
Firefox
Safari
Опера
17. X:checked
input:checked { border:1px solid black; }
Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.
Совместимость
IE9 +
Firefox
Safari
Опера
18. X:after
Псевдоклассы:before и:after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.
Многие познакомились с этими псевдоклассами при работе с clear-fix hack.
Этот хак
использует:after чтобы добавить пробел после элемента и запретить его обтекание.
Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.
Совместимость
IE8 +
Firefox
Safari
Опера
19. X:hover
div:hover { background: #e3e3e3; }
Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS
-селектор для вас.
Имейте в виду, что старые версии Internet Explorer применяют:hover
только к ссылкам.
Этот CSS
-селектор часто используют для того, чтобы поставить border-bottom
на ссылки, когда на них наводят мышкой.
A:hover { border-bottom: 1px solid black; }
border-bottom: 1px solid black;
выглядит лучше, чем text-decoration: underline;
Совместимость
IE6 + (В IE6: hover должен быть применен к ссылке)
Firefox
Safari
Опера
20. X:not(selector)
div:not(#container) { color: blue; }
Псевдокласс отрицания бывает очень полезным. Скажем, нужно выбрать все div, за исключением того, который имеет id = container
. Приведенный выше код справиться с этим!
Или, если необходимо выбрать все элементы, за исключением p.
*:not(p) { color: green; }
Совместимость
IE9 +
Firefox
Safari
Опера
21. X::псевдо
элемент
Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.
Аналогичным образом благодаря::first-line мы задаем стиль первой строки в абзаце.
“Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and:after)
. Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации”
Совместимость
IE6 +
Firefox
Safari
Опера
22. X:nth-child(n)
li:nth-child(3) { color: red; }
Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!
Обратите внимание, что nth-child
принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2)
.
Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}
.
Совместимость
IE9 +
Firefox 3,5 +
Safari
23. X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
Что делать, если у вас огромный список элементов в ul
, а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child
.
Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
24. X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black; }
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.
Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul
, не имеющему уникального id
, нужно использовать nth-of-type
.
Мы можем также использовать nth-last-of-type
, отсчитывая элементы с конца.
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
26. X:first-child
ul li:first-child { border-top: none; }
Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.
Совместимость
IE7 +
Firefox
Safari
Опера
27. X:last-child
ul > li:last-child { color: green; }
В противоположность :first-child:last-child
выбирает последний дочерний элемент.
Совместимость
IE9 + (Да да, IE8 поддерживает:first-child , но не поддерживает:last-child. Microsoft-у привет!)
Firefox
Safari
Опера
28. X:only-child
div p:only-child { color: red; }
Вы не часто встретите этот псевдокласс, тем не менее он существует.
Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
Один параграф.
Два параграфа
Два параграфа
Будет выбран p только первого div`a, потому что он единственный дочерний элемент.
Совместимость
IE9 +
Firefox
Safari
Опера
29. X:only-of-type
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type
.
Ul > li:only-of-type { font-weight: bold; }
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
30. X:first-of-type
first-of-type выбирает первый элемент заданного типа.