Бортовой журнал Ктулху
Смейтесь над шуткой до тех пор, пока не поймете смысл.

30 css селекторов, необходимых каждому верстальщику

Эта статья найдена на просторах интернета. Источник нет смысла указывать, т.к. она 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
  • Опера
Рейтинг@Mail.ru
Яндекс.Метрика
Hosting Ukraine
Счетчик PR-CY.Rank
Счетчик PR-CY.Rank