Эта статья найдена на просторах интернета. Источник нет смысла указывать, т.к. она over 9000 раз перекопирована. Я посчитал ее весьма полезной для себя и решил с небольшими правками опубликовать.
Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Некоторые из этих селекторов поддерживаются даже старыми версиями браузеров.
Выделение всех элементов
---------- CSS ----------
* {
margin: 0;
padding: 0;
}
---------- /CSS ----------
Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.
Его также можно использовать для выделения всех дочерних элементов, определенного контейнера.
---------- CSS ----------
#container * {
border: 1px solid black;
}
---------- /CSS ----------
В данном случае выделяться все дочерние элементы блока #container. Лучше не злоупотреблять им.
Совместимость:
- IE6 +
- Firefox
- Chrome
- Safari
- Opera
Выделение только определенного элемента
---------- CSS ----------
#container {
width: 960px;
margin: auto;
}
---------- /CSS ----------
# перед CSS-селектором выделит элемент с id="container". Это очень просто, но лучше id не использовать.
id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов class="", названий тэгов или даже псевдо-классов.
Совместимость:
- IE6 +
- Firefox
- Chrome
- Safari
- Opera
Выделение группы элементов
.error {
color: red;
}
Это CSS-селектор класса. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам.
Совместимость:
- IE6 +
- Firefox
- Chrome
- Safari
- Chrome
Селектор дочерних элементов
---------- CSS ----------
li a {
text-decoration: none;
}
---------- /CSS ----------
Если нужно выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li.
Не следует делать CSS-селекторы вида Х Y Z A B.error. Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.
Совместимость:
- IE6 +
- Firefox
- Chrome
- Safari
- Chrome
Выделение всех элементов определенного типа
---------- CSS ----------
a { color: red; }
ul { margin-left: 0; }
---------- /CSS ----------
Если нужно охватить все элементы данного типа на странице, используйте CSS-селектор типа. Например, если вы должны выделить все неупорядоченные списки, используйте
---------- CSS ----------
ul {}
---------- /CSS ----------
Совместимость:
- IE6 +
- Firefox
- Chrome
- Safari
- Opera
Выделение ссылок, на которые еще не кликнули
---------- CSS ----------
a:link { color: red; }
a:visted { color: purple; }
---------- /CSS ----------
Мы используем псевдо-класс :link, для выделения всех ссылок, на которые еще не кликнули.
Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс :visited.
Совместимость:
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
Выделяет последующий элемент
---------- CSS ----------
ul + p { color: red; }
---------- /CSS ----------
Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.
Совместимость:
- IE7 +
- Firefox
- Chrome
- Safari
- Chrome
Непосредственные дочерние элементы
div#container > ul { border: 1pxsolidblack; }
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.
---------- HTML ----------
<div id="container">
<ul>
<li>Элемент списка</li>
<ul>
<li>Дочерний элемент</li>
</ul>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
---------- /HTML ----------
CSS-селектор #container > ul выберет только ul, которые являются непосредственными дочерними элементами div с id =container. Он не выберет, например, ul, являющиеся дочерними элементами первых li .
Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.
Совместимость:
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
Выбрать только первый элемент
---------- CSS ----------
ul ~ p { color: red; }
---------- /CSS ----------
Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.
Совместимость:
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
Атрибуты
---------- CSS ----------
a[title] { color: green; }
---------- /CSS ----------
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.
Совместимость:
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
Строгий селектор ссылки
---------- CSS ----------
a[href="http://yandex.ru"] { color: #ffde00; }
---------- /CSS ----------
Все ссылки, которые ссылаются на yandex.ru будут золотыми. Все остальные ссылки останутся неизменными неизменным.
Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.
Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.
Совместимость:
- IE7 +
- Firefox
- Chrome
- Safari
- Chrome
Дочерние ссылки
---------- CSS ----------
a[href*="yandex"] { color: # 1f6053; }
---------- /CSS ----------
Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, http://yandex.ru/somepage и т.д.
Но что делать, если ссылка ведет на какой-то сторонних и не связанный ресурс, в адресе которого присутствует yandex? Тогда нужно использовать «^»или «&», для ссылки на начало и конец строки соответственно.
Совместимость:
- IE7 +
- Firefox
- Chrome
- Safari
- Opera
Начало строки
---------- CSS ----------
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
---------- /CSS ----------
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.
«^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.
Обратите внимание, что мы не ищем «http://». Это неправильно, поскольку не учитываются адреса, начинающиеся с https://
А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.
Совместимость:
- IE7 +
- Firefox
- Хром
- Safari
- Опера
Конец строки
---------- CSS ----------
a[href$=".jpg"] { color: red; }
---------- /CSS ----------
Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».
Совместимость:
- IE7 +
- Firefox
- Хром
- Safari
- Опера
Все виды изображений
---------- CSS ----------
a[data-filetype="image"]{ color: red; }
---------- /CSS ----------
Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:
---------- CSS ----------
a[href$=".JPG"],
a[href$=". JPEG"],
a[href$=".PNG"],
a[href$=".GIF"] {
color: red;
}
---------- /CSS ----------
Но это неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?
---------- HTML ----------
<a href="/path to="image.jpg" data-filetype="image"> Ссылка на изображение </a>
---------- /HTML ----------
Теперь мы можем выделить такие ссылки при помощи данного CSS-селектора:
---------- CSS ----------
a[data-filetype="image"] { color: red; }
---------- /CSS ----------
Совместимость:
- IE7 +
- Firefox
- Хром
- Safari
- Опера
Определенный атрибут из списка атрибутов
---------- CSS ----------
a[data-info~="external"] { color: red; }
a[data-info~="image"] { border: 1pxsolidblack; }
---------- /CSS ----------
А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.
Например, можно задать собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так можно указать что ссылка является внешней и что она ссылается на изображение.
---------- HTML ----------
<a href="/path/to/image.jpg" data-info="external image"> Click Me </a>
---------- /HTML ----------
---------- CSS ----------
/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external"* /
a[data-info~="external"] { color: red; }
/ * И которые содержат значения "image"* /
a[data-info~="image"] { border: 1pxsolidblack; }
---------- /CSS ----------
Совместимость:
- IE7 +
- Firefox
- Хром
- Safari
- Опера
Только элементы пользовательского интерфейса, такие как переключатель или флажок
---------- CSS ----------
input[type=radio]:checked { border:1pxsolidblack; }
---------- /CSS ----------
Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены или выбраны.
Совместимость:
- IE9 +
- Firefox
- Хром
- Safari
- Опера
Контент после элемента
Они просто присоединяют контент после выбранного элемента.
---------- /CSS ----------
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
---------- /CSS ----------
Этот хак использует :after чтобы добавить пробел после элемента, и запретить его обтекание.
Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.
Совместимость:
- IE8 +
- Firefox
- Хром
- Safari
- Опера
Действие при наведении
---------- CSS ----------
div:hover { background: #e3e3e3; }
---------- /CSS ----------
Имейте в виду, что старые версии Internet Explorer применяют :hover только к ссылкам.
Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.
---------- CSS ----------
a:hover { border-bottom: 1pxsolidblack; }
border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;
---------- /CSS ----------
Совместимость:
- IE6 + (В IE6: hover должен быть применен к ссылке)
- Firefox
- Хром
- Safari
- Опера
Отрицание
---------- CSS ----------
div:not(#container) { color: blue; }
---------- /CSS ----------
Можно выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!
Или, если бы я хотел выбрать все элементы, за исключением p.
---------- CSS ----------
*:not(p) { color: green; }
---------- /CSS ----------
Совместимость:
- IE9 +
- Firefox
- Хром
- Safari
- Опера
Псевдоэлемент
---------- CSS ----------
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
---------- /CSS ----------
Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.
Псевдо-элемент задается двумя двоеточиями: ::
Выбираем первую букву в параграфе
---------- CSS ----------
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right:2px;
}
---------- /CSS ----------
Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.
Выбираем первую строку в абзаце
---------- CSS ----------
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
---------- /CSS ----------
Аналогичным образом благодаря ::first-line мы задаем стиль первой строки в абзаце.
«Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации». Источник.
Совместимость:
- IE6 +
- Firefox
- Хром
- Safari
- Опера
Указание номера потомка
---------- CSS ----------
li:nth-child(3) { color: red; }
---------- /CSS ----------
nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .
Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.
Совместимость:
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
Указание номера потомка с конца
---------- CSS ----------
li:nth-last-child(2) { color: red; }
---------- /CSS ----------
Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.
Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.
Совместимость:
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
- Опера
Элемент определенного типа
---------- CSS ----------
ul:nth-of-type(3) { border: 1pxsolidblack; }
---------- /CSS ----------
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.
Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.
Совместимость:
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
Элемент определенного типа с конца
---------- CSS ----------
ul:nth-last-of-type(3) { border: 1pxsolidblack; }
---------- /CSS ----------
Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.
Совместимость:
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
- Опера
Первый элемент списка
---------- CSS ----------
ul li:first-child { border-top: none; }
---------- /CSS ----------
Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.
Совместимость:
- IE7 +
- Firefox
- Хром
- Safari
- Опера
Последний элемент списка
---------- CSS ----------
ul > li:last-child { color: green; }
---------- /CSS ----------
В противоположность :first-child :last-child выбирает последний дочерний элемент.
Совместимость:
- IE9 + (Да да, IE8 поддерживает :first-child , но не поддерживает :last-child. Microsoft-у привет! )
- Firefox
- Хром
- Safari
- Опера
Только дочерние элементы
---------- CSS ----------
div p:only-child { color: red; }
---------- /CSS ----------
Вы не часто встретите этот псевдокласс, тем не менее он существует.
Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
---------- HTML ----------
<div>
<p>Здесь идет единственный в блоке параграф.</p>
</div>
<div>
<p>Здесь идет первый параграф в блоке.</p>
<p>Здесь идет второй параграф в блоке.</p>
</div>
---------- /HTML ----------
Будет выбран p только первого div'a, потому что он единственный дочерний элемент.
Совместимость:
- IE9 +
- Firefox
- Хром
- Safari
- Опера
Только элементы, не имеющие соседей в пределах родительского элемента
---------- CSS ----------
li:only-of-type { font-weight: bold; }
---------- /CSS ----------
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type .
---------- CSS ----------
ul > li:only-of-type { font-weight: bold; }
---------- /CSS ----------
Совместимость:
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
- Опера
Первый элемент определенного типа
first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.
---------- HTML ----------
<div>
<p>Здесь параграф.</p>
<ul>
<li>Элемент 1.</li>
<li>Элемент 2.</li>
</ul>
<ul>
<li>Элемент 3.</li>
<li>Элемент 4.</li>
</ul>
</div>
---------- /HTML ----------
А теперь попытайтесь понять как выделить пункт 2.
Решение 1
---------- CSS ----------
ul:first-of-type > li:nth-child(2) { font-weight: bold; }
---------- /CSS ----------
Решение 2
---------- CSS ----------
p + ul li:last-child { font-weight: bold; }
---------- /CSS ----------
Решение 3
---------- CSS ----------
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
---------- /CSS ----------
Совместимость:
- IE9 +
- Firefox 3,5 +
- Хром
- Safari
- Опера