30 с плюсом CSS селекторов которые должен помнить каждый

Рекомендую хостинг которым я пользуюсь

Hosting Ukraine
CSS селекторы, памятка разработчикам

Памятка по более чем 30 CSS-селекторам, которая может пригодиться как начинающим, так и уже продвинутым верстальщикам и Web-мастерам, которым приходиться изредка править стили на своих или клиентских сайтах. Список селекторов имеет удобное меню, которое без труда поможет выбрать описание нужного селектора по памяти.

Содержание статьи.
Наведите на элемент чтобы примерно понимать его суть.
Кликните чтобы перейти к нему.
*Наведите курсор на интересующий селектор для получения краткой подсказки.
* #X .X X
X˽Y X:hover X:link X:visited
X:active X + Y X > Y X ~ Y
X[title] X[href="anylink"] X[href*="anylink"] X[href^="http"]
X[href$=".jpg"] X[data-*="anytext"] X[attr~="karma"] X:checked
X:after X:before X:not(selector) X::pseudoElement
X:nth-child(n) X:nth-last-child(n) X:nth-of-type(n) X:nth-last-of-type(n)
X:first-child X:last-child X:only-child X:only-of-type
X:first-of-type

Свою благодарность автору статьи вы можете выразить просто кликнув в нужном месте на странице 🙂

1) *

к списку

Ниже представлен самый просто пример использования данного селектора.

Благодаря этому правилу, описанные в фигурных скобках css-правила будут применены ко всем элементам на странице.

*{
margin: 0;
padding: 0;
}

Иногда может понадобиться выбрать все элементы внутри какого-то определенного элемента, например body. Для этого можно использовать немного усложненный вариант селектора:

body * {
color: red;
border: 1px solid #000;
}

Приведенные выше правила применяться абсолютно ко всем элементам, находящимся внутри тега BODY, в результате у блочных элементов появиться черная рамка а весь вложенный текст окраситься в красный.

Совместимость: 

* IE6+ | * Firefox | * Chrome | * Safari | * Opera

2) #X

к списку
Селектор с символом решетки позволяет отбирать элементы по идентификатору (айдишнику или ID элемента).

#container {
width: 960px;
margin: auto;
}

При верстке HTML макетов помните что ID желательно использовать на странице только один раз, иначе вас накажет великий валидатор W3 ))) Так же помните что в отличие от класса, ID имеет приоритет. Тоесть если у элемента и класс и ID, и для класса указан цвет текста красный, а для ID указан синий, то в итоге текст будет окрашен в синий, независимо от порядка строк.

Совместимость: 

* IE6+ | * Firefox | * Chrome | * Safari | * Opera

3) .X

к списку
Это селектор класса. От ID (айдишника) он отличается тем что валидатор позволяет его присваивать нескольким элементам на странице, соответственно используя данный селектор мы можем выбрать сразу группу элементов. По возможности рекомендуется использовать именно классы.

.errortext {
color: red;
}

Совместимость: 

* IE6+ | * Firefox | * Chrome | * Safari | * Opera

4) X

к списку
Это селектор по типу элемента. Например вам может понадобиться, и в принципе это очень часто используется, сбросить стили браузеров. Как вы наверное знаете каждый браузер по умолчанию имеет свои настройки для отображения некоторых элементов, кто-то добавляет отступы у блоковых элементов, кто-то присваивает тегам input и текстовым полям выделение при фокусе. Так вот перед тем как верстать макет страницы, вначале нужно сбросить стили всех элементов к одному виду. Так же такой подход используется, если нужно присвоить стили элементам, которые не имеют своих классов или идентификаторов.

В примере ниже мы присвоим всем тегам параграфа, которые есть на странице, наши стили:

p {
font-size: 14px;
color: #424242;
padding 5px;
margin: 0;
}

Если же мы хотим одни и те же стили присвоить разным тегам, например параграфу <p> и ссылке <a>? то это будет выглядеть вот так:

p, a {
font-size: 14px;
color: #424242;
padding 5px;
margin: 0;
}

! К любым селекторам, перечисленным через запятую перед открывающей фигурной скобкой, применяются правила оформления, описанные в фигурных скобках.

Совместимость: 

* IE6+ | * Firefox | * Chrome | * Safari | * Opera

5) X Y

к списку
Селектор представляет собой теги, перечисленные через пробел. Понадобиться такая запись может если, например, вам нужно каким-то образом выделить только те ссылки, которые находятся внутри тега списка <li> (типичная конструкция меню сайта).

li a {
color: red;
font-weight: bold;
}

Совместимость: 

* IE6+ | * Firefox | * Chrome | * Safari | * Opera

6) X:hover

к списку
Ну это наверное самый первый способ, который позволял организовать некий интерактив на странице вашего сайта - применение стиля к элементу при наведении на него курсора мыши, а по научному зовется: "псевдо-класс, основанный на действии пользователя".

Применить стиль можно к любой и практически к любому элементу, будь-то параграф, ссылка, блок DIV и т.д., при наведени можно изменить цвет текста, добавить тексту подчеркивание или изменить его размер. При наведении на блок, можно, например изменить его заливку, или добавить цвет и ширину границы, возможности поистине безграничны, но не переусердствуйте, все должно смотреться гармонично :))

Ниже приведен пример использования данного псевдокласса:

div:hover {
border: 1px solid #ccc;
background: green;
}

Совместимость: 

* IE6+ (в IE6 работает только по отношению к ссылкам) | * Firefox | * Chrome | * Safari | * Opera

7) X:link

к списку
Данный псевдокласс используется для того чтобы выделить все ссылки, на которых еще не было сделано ни одного клика. Такое выделение весьма добавляет удобства посетителям, если вы разместили на сайте достаточно емкий материал и разбили его на части, на каждую из которых ведет якорь. Ваш посетитель всегда будет знать какую часть материала он уже прочем, а какую нет.

Пример:

a:link {
color: blue;
}

Совместимость: 

* IE7+ | * Firefox | * Chrome | * Safari | * Opera

8) X:visited

к списку
Псевдокласс аналогичный предыдущему, за тем исключением что при помощи его можно выделить как раз уже посещенные посетителем ссылки.

Пример:

a:visited {
color: #ccc;
}

В примере выше мы выделили посещенные ссылки светло-серым цветом, сделав их менее заметными.

Совместимость: 

* IE7+ | * Firefox | * Chrome | * Safari | * Opera

9) X:active

к списку
Псевдокласс который позволяет выделить элемент непосредственно при клике по нему мышкой, то есть данный стиль применяется если мы зажмем на элементе кнопку мыши. Когда кнопку отпустим, стиль перестанет применяться.

Пример:

a:active {
color: red;
}

Совместимость: 

* IE7+ | * Firefox | * Chrome | * Safari | * Opera

10) X + Y

к списку
Это смежный селектор. Где можно его использовать? Ну например вам может понадобиться выделить тег параграфа <p>, идущий сразу за тегом <li>.

Пример:

ul + p {
font-weight: bold;
color: red;
}

Совместимость:

* IE7+ | * Firefox | * Chrome | * Safari | * Opera

11) X > Y

к списку
Грубо говоря это селектор прямого потомка.

Сразу приведу пример CSS:

#wrap > ul{
border: 1px solid #555;
}

и пример html, в котором мы будем выделять элементы и присваивать им, как видно из приведенного выше правила CSS, красный цвет и жирность для текста, находящегося в теге <li>

<div id="wrap">
<ul>
<li>Элемент списка 1
<ul>
<li>Элемент списка 1-2</li>
<li>Элемент списка 2-2</li>
</ul>
</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
<li>Элемент списка 4</li>
</ul>
</div>

Если все сделать как в нашем примере, то граница появиться только у тегов <ul> самого первого уровня вложенности в теге <div>. Все дело в том что при использовании в правилах CSS конструкции X > Y селектор выбирает только первый уровень элементов не затрагивая последующие уровни. И если среди вложенных непосредственно в див тегов не нашлось бы тега <ul> то ничего выделено бы не было.

<div id="wrap">
<div>
<div>
<ul>
<li>Элемент списка 1
<ul>
<li>Элемент списка 1-2</li>
<li>Элемент списка 2-2</li>
</ul>
</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
<li>Элемент списка 4</li>
</ul>
<div>
</div>
<div>
<div>

Вот в этом коде у тега с идентификатором wrap среди прямых потомков нет тега <ul>, для него прямым потомком является тег <div> не имеющий идентификатором и классов. Потому в этоm коде правило не сработает.

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

12) X ~ Y

к списку
Пример:

li ~ p{
color: red;
}

Этот селектор очень похож на селектор X + Y за тем исключением что при использовании знака "+" в приведенном ниже примере будет выбран каждый первый тег <p> идущий за тегом <li>, а при использовании тильды "~" будут выбраны все теги <p> идущие за тегом <li>.

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

13) X[title]

к списку
Это селектор по атрибуту элемента. Как вы знаете, в настоящий момент теги могут иметь абсолютно любые атрибуты, от прописанных в спецификации до придуманных разработчиками. Так вот данный селектор поможет выделить только те теги, у которых имеется атрибут, название которого совпадает с указанным в селекторе в квадратных скобках.

Пример:

CSS

a[title]{
color: red;
}

HTML


<a title="Это простая ссылка">Эта ссылка будет выделена</a>

<a>Эта ссылка выделена не будет</a>

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

14) X[href = "anylink"]

к списку
Этот селектор выделит только те элементы у которых есть атрибут href, значение которого совпадает с текстом "anylink". Если атрибут будет иметь значение "anylink1" или "anylin" то ссылка выделена не будет. Совпадение должно быть точным.

Имейте так же ввиду: регистр имеет значение

Пример:

a[href="anylink"]{
color: red;
font-weight: bold;
}
<a href="anylink">Ссылка 1</a> <!--эта ссылка будет выделена-->

<a href="anylin">Ссылка 2</a> <!--а эта ссылка не будет выделена так как значение атрибута href не совпадает-->

<a href="Anylin">Ссылка 2</a> <!--а эта ссылка так же не будет выделена-->

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

15) X[href *= "anylink"]

к списку
Данный селектор позволяет выделить элемент по части значения атрибута.
Пример:

a[href*="anylink"]{
color: red;
}

Ссылка будет выделена если значение атрибута href содержит "anylink".

<a href="http://www.site.ua/gromanylink15/">ссылка 1</a><!--эта ссылка будет выделена-->
<a href="http://www.site.ua/gromanylin-15/">ссылка 2</a><!--а эта ссылка не будет выделена-->

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

16) X[href ^= "http"]

к списку
Пример:

a[href^="http"]{
color: red;
}

Этот селектор выделить все ссылки у которых атрибут href начинается с "http"

<a href="http://site.ua/anylink">ссылка 1</a><!--эта ссылка будет выделена-->
<a href="www.site.ua/anylink">ссылка 1</a><!--а эта ссылка НЕ будет выделена-->

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

17) X[href $= ".jpg"]

к списку
Пример:

a[href $=".jpg"]

Этот селектор позволяет выделить ссылки, значение атрибута href которых заканчивается на ".jpg". Так при помощи этого метода можно выделить все ссылки ведущие на картинки.

<a href="http://site.ua/anylink.jpg">ссылка 1</a><!--эта ссылка будет выделена-->
<a href="http://site.ua/anylink.png">ссылка 1</a><!--а эта ссылка НЕ будет выделена-->

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

18) X[data-anytext = "anylabel"]

к списку
Этот селектор уже относиться к HTML5, так как именно в нем мы получили возможность создавать произвольные атрибуты, единственное ограничение - произвольный атрибут должен начинаться со слова "data-" и далее произвольный набор букв в нижнем регистре.
Где это может пригодиться?
Представьте себе что у вас есть несколько ссылок, которые ведут на картинки различных типов: *.jpg; *.jpeg; *.png; *.gif и т.д. и вам нужно выделить все эти ссылки не затронув при этом ссылки другого типа. Можно конечно наклепать селекторов под каждое расширение:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}

хорошо что в нашем примере не так много вариантов, а если их будет не 4 а 15?
В этом случае мы и воспользуется выше описанным селектором, предварительно добавив в html каждой ссылке на картинку свой атрибут, пусть это будет data-filetype и для картинок зададим для него значение "image" как показано в примере ниже:

<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>
<a href="path/to/image.jpeg" data-filetype="image">Ссылка</a>
<a href="path/to/image.png" data-filetype="image">Ссылка</a>
<a href="path/to/image.gif" data-filetype="image">Ссылка</a>

проделав эту операцию теперь мы сможем с легкостью выделить все ссылки ведущие на картинки используя следующий селектор:

a[data-filetype="image"] {
color: red;
}

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

19) X[attr ~= "karma"]

к списку
Пример:

a[data-newattr~="karma"]{
color: red;
}

Полный аналог селектора X[href *= "anylink"], так же позволяет выделить элемент по части значения атрибута? не важно стандартного или придуманного.

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

20) X:cheked

к списку

input[type=checkbox]:checked {
border: 1px solid black;
}

Данный селектор по псевдоклассу поможет выделить все элементы, которые были отмечены пользователем, будь то чекбокс или радиокнопка.
Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

21) X:after

к списку

.clearfix:after {
content: "Новая новость";
display: block;
}

данный селектор позволит вам после выбранных элементов добавить произвольный текст. Может пригодиться если, к примеру, у вас на сайте есть список новостей, и вам нужно добавить к каждой такой записи слово "Новая новость".
Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

22) X:before

к списку

.clearfix:before {
content: "Новая новость";
display: block;
}

данный селектор позволит вам перед выбранными элементами добавить произвольный текст. Полный аналог селектора X:after, только текст добавляется на после элемента, а перед ним.
Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

23) X:not(selector)

к списку
Это интересный селектор, так называемый селектор отрицания.
Вам может понадобиться выделить все элементы DIV кроме того у которого указан идентификатор "container". Делается это как показано ниже,

div:not(#container) {
color: blue;
}

... или, например мы хотим выделить все кроме тега "article"

*:not(article) {
color: green;
}

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

24) X::pseudoElement

к списку
Селектор по псевдоэлементу. Псевдоэлементы используются для выделения отдельных участков текста таких как первая строка или первая буква.
Выделяем первую букву в каждом параграфе:

p::first-letter {
font-size: 20px;
font-weight: bold;
padding-right: 2px;
}

выделяем первую строку в каждом параграфе:

p::first-line {
font-size: 20px;
font-weight: bold;
padding-right: 2px;
}

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

25) X:nth-child(n)

к списку

li:nth-child(3) {
color: red;
}

Благодаря этому селектору мы можем выбрать любой по счету элемент среди себе подобных.
Например нам нужно выбрать среди десяти элементов списка второй. В качестве параметра данный селектор принимает целое число. Так вот для того чтобы выбрать второй элемент, нужно использовать конструкцию: li:nth-child(2), где 2 это порядковый номер элемента.

Но и это еще не все. Мы может благодаря этому селектору выбрать даже группу элементов и многое другое.

Основные примеры использования nth-child:

nth-child(3);  - только третий элемент в списке
nth-child(3n);  - каждый третий элемент в списке
nth-child(3n + 2);  - каждый третий элемент начиная со второго
nth-child(3n - 2);  - каждый третий элемент начиная с первого
nth-child(-n + 2);  - первые два элемента
nth-child();
nth-child();
nth-child();
nth-child();

 

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

26) X:nth-last-child(n)

к списку

li:nth-last-child(5){
color: red;
}

Этот селектор похож на описанный выше, только там мы выбирали элементы по порядковому номеру, начиная считать сначала. А если у нас список состоит из примерно трехсот элементов и точного количества мы не знаем, а выделить нам нужно пятый элемент начиная с конца списка. Так вот, пересчитывать элементы нам не придется чтобы в итоге написать что-то вроде li:nth-child(292), мы просто используем конструкцию li:nth-last-child(5) и выделим нужный элемент считая с конца.

Чтобы выбрать только последние 5 элементов:

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

27) X:nth-of-type(n)

к списку
Данный селектор позволяет вам выделить нужные вам элементы из их однотипных собратьев. Например у вас есть список элементов и вам нужно выделить среди них элементы по определенной логике. Благодаря этому селектору можно выделить элементы по таким параметрам, указав их в скобках :

- выделить элемент с порядковым номером, например третий? указав этот параметр в скобках

ul li:nth-of-type(3) {border: 1px solid black;}

 

- выделить все четные элементы 2n (аналог значение even)

ul li:nth-of-type(2n) {border: 1px solid black;}

или

ul li:nth-of-type(even) {border: 1px solid black;}

таким образом будут выделены элементы с порядковыми номерами: 2, 4, 6, 8, 10 и т.д.

 

- выделить все нечетные элементы 2n+1 (аналог значения odd)

ul li:nth-of-type(2n+1) {border: 1px solid black;}

или

ul li:nth-of-type(odd) {border: 1px solid black;}

таким образом будут выделены элементы с порядковыми номерами: 1, 3, 5, 7, 9, 11 и т.д.

 

- Но и это еще не все. Логику выбора элементов можно задавать гибко, например с каким-то определенным шагом.
В примере ниже мы выделим все элементы начиная с третьего (3n) с шагом до следующего элемента, равным четверке (4).

ul li:nth-of-type(3n+4) {border: 1px solid black;}

 

- так же если использовать отрицательное значение в коэффициенте, можно выделить элементы начиная с конца, указав номер элемента с которого нужно начинать и шаг, выделения. Выделим каждый третий (-3n) элемент начиная с десятого (10)

ul li:nth-of-type(-3n+10) {border: 1px solid black;}

благодаря этому селектору будут выделены следующие элементы и в следующем порядке: 10, 7, 4, 1

 

- следующие селекторы помогут выделить одни и те же элементы (то есть данные селекторы полностью идентичны)

ul li:nth-of-type(5n-3) {border: 1px solid black;}

и

ul li:nth-of-type(5n+2) {background-color: red;}

будут выделены элементы: 2, 7, 12 и т.д.
Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

28) X:nth-last-of-type(n)

к списку
Этот селектор позволяет выделить нужные элементы с нужным шагом, только начиная с конца. То есть данный селектор аналогичен предыдущему, но благодаря ему не нужно извращаться с отрицательными значениями как мы это делали в предыдущем примере.

- выделим третий элемент с конца списка

ul li:nth-last-of-type(3) {border: 1px solid black;}

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

29) X:first-child

к списку
Данный псевдокласс позволяет выбрать только первый дочерний элемент из списка. Как и следующий селектор, он часто используется при оформлении пунктов меню. Часто, например, нужно убрать рамку у первого и последнего элементов, в то время как у остальных она должна присутствовать.

ul li:first-child {
border-top: none;
border-left: none;
}

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

30) X:last-child

к списку
Данный псевдокласс позволяет выбрать только последний дочерний элемент из списка. Как и предыдущий селектор, он часто используется при оформлении пунктов меню. Часто, например, нужно убрать рамку у последнего и первого элементов, в то время как у остальных она должна присутствовать.

ul li:lust-child {
border-top: none;
border-left: none;
}

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

31) X:only-child

к списку

div p:only-child {
color: red;
}

Редко используемый псевдокласс, тем не менее иногда может быть очень полезен. Он позволяет выбрать элемент, только в том случае если он является единственным дочерним элементом.
Рассмотрим пример:
HTML код

<div>
<p>Единственный параграф в этом элементе DIV.</p>
</div>

<div>
<p>Единственный параграф в этом элементе DIV.</p>
<span>Другой элемент 1</span>
<span>Другой элемент 2</span>
</div>

<div>
<p>Первый и не единственный параграф в этом элементе DIV.</p>
<p>Второй и не единственный параграф в этом элементе DIV.</p>
<span>Другой элемент 1</span>
<span>Другой элемент 2</span>
</div>

В данном случае красным цветом будет выделен только текст, содержащийся в параграфе в первом элементе DIV.
Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

32) X:only-of-type

к списку
Этот селектор позволяет выбрать элемент, только в том случае если он является единственным элементом своего типа среди дочерних элементов. Подробнее рассмотрим на примере:

<div>
<p>Единственный параграф в этом элементе DIV.</p>
</div>

<div>
<p>Единственный параграф в этом элементе DIV.</p>
<span>Другой элемент 1</span>
<span>Другой элемент 2</span>
</div>

<div>
<p>Первый и не единственный параграф в этом элементе DIV.</p>
<p>Второй и не единственный параграф в этом элементе DIV.</p>
<span>Другой элемент 1</span>
<span>Другой элемент 2</span>
</div>

В данном примере текст будет выделен в первом и втором элементе DIV

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

33) X:first-of-type

к списку
Этот псевдо-класс позволяет отобрать первый дочерний элемент того же типа что и все соседние.

Чтобы лучше это понять, скопируйте в свой редактор следующий код:

<div>

Здесь параграф.
<ul>
<li>Элемент 1.</li>
<li>Элемент 2.</li>
</ul>
<ul>
<li>Элемент 3.</li>
<li>Элемент 4.</li>
</ul>
</div>

Задача состоит в том чтобы выбрать только элемент 2.

В этом нам поможет следующий селектор:

div ul:first-of-type li:first-of-type{
color: red;
}

Совместимость: * IE7+ | * Firefox | * Chrome | * Safari | * Opera

Свою благодарность автору статьи вы можете выразить просто кликнув в нужном месте на странице 🙂

автор: Руслан Овчинников
Оценка: 1Оценка: 2Оценка: 3Оценка: 4Оценка: 5 (4 оценок, в среднем: 4,75 из 5)
Загрузка...