WordPress как на ладони
wordpress jino

CSS селекторы

В этой статье я постараюсь понятно объяснить что такое CSS селекторы и как использовать каждый из них. Здесь описаны все селекторы, которые нужно знать при работе с CSS.

Оглавление:

Что такое CSS селекторы и каскадность?

CSS селектор - это часть правила, с помощью которого можно выбирать элемент в HTML/XHTML/XML документе. Выбранный элемент можно оформить с помощью различных свойств (стилей) CSS.

Для начала обусловимся:

  • Под словом «селектор» подразумевается один CSS селектор: div, #content, :hover;

  • Под словом «CSS правило» (далее просто «правило») подразумевается комбинация селекторов: #content .text p.

Приоритеты и каскадность

Прежде чем разбирать селекторы, важно знать главный принцип CSS — каскадность (Cascading Style Sheets — каскадные таблицы стилей). Каскадность — это приоритет одних правил (стилей) над другими.

При вычислении приоритета в браузере, каждый селектор получает баллы, затем баллы складываются. Так css-правило получает «вес». В итоге, элемент получит стили самого «весомого» правила. Пример:

#content .text p{ color:red; } /* 100 + 10 + 1 = 111 */
.text p{ color:blue; }         /* 10 + 1 = 11 */

Тег <p> внутри элемента .text получит стиль color:red;, а не color:blue;, потому что приоритет выше (111, а не 11).

Если несколько css-правил с одинаковым весом влияют на один элемент, то элемент получит стили правила, которое ближе к концу HTML страницы (ниже в коде).

Какой селектор какие баллы получает:

  1. Универсальный селектор (*) — 0 баллов.

  2. Селекторы тегов (div,a,span) и псевдоэлементов (:first-letter) — 1 балл за каждый.

  3. Селекторы атрибутов ([атрибут="значение"]), классов (.text) и псевдоклассов (:hover,:active) — 10 баллов за каждый.

  4. Селектор по id (#content) — 100 баллов за каждый.

  5. Атрибут style (<div style="color:red;">) — 1000 баллов. Самый сильный.

  6. Правило !important (color:red !important;) — перебивает абсолютно все правила, включая атрибут style. Его можно перебить только еще одним !important расположенным ниже в коде.

Немного практики:

* {}                        /* =   0 */
li {}                       /* =   1 */
li::first-line {}           /* =   2 */
ul li {}                    /* =   2 */
ul ol+li {}                 /* =   3 */
ul li.red {}                /* =  12 */
li.red.level {}             /* =  21 */
li:not(.red){}              /* =  11 */
li:not(.red):not(.green){}  /* =  11 */

#t34 {}                     /* = 100 */

#content #wrap {}           /* = 200 */

Не думайте, что вам всегда нужно будет считать приоритеты. Нужно просто понимать как это работают. На практике это никогда не высчитывается.

Приоритеты при медиа запросах

Медиа запросы, например: @media (max-width:500px){} не участвуют в подсчете приоритета и всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие, когда срабатывает указанное условие (условие ширины экрана).

Например так писать неправильно, потому что тут медиа запрос всегда имеет меньший приоритет и вообще не будет работать:

@media (max-width:500px){
	.section{ width:50%; }
}

.section{ width:100%; }

Правильно:

.section{ width:100%; }

@media (max-width:500px){
	.section{ width:50%; }
}

Все селекторы CSS (коротко)

Явные селекторы

Эти селекторы указываются в HTML документе, можно посмотреть исходный код и увидеть нужный селектор.

Селектор Пример Описание Подд. / CSS
* * Все элементы. Кроме псевдо-элементов. 100% / 2
.class .myclass Элемент с class="myclass". 100% / 1
#id #main Элемент с id="main". 100% / 1
HTML тег span Элемент <span>. 100% / 1
[атрибут] [title] Элементы с атрибутом title. 100% / 2
[атрибут = значение] [title=cost] Элементы с атрибутом  title="cost". 100% / 2
[атрибут ~= значение] [title~=cost] Элементы с атрибутом title, в значение которого есть cost окруженное или нет пробелом '``':cost,cost foo,foo cost`` 100% / 2
[атрибут ^= значение] [src^="http"] Элементы с атрибутом src, значение которого начинается с http. 97.5% / 3
[атрибут $= значение] [src$=".png"] Элементы с атрибутом src, значение которого заканчивается на .png. 97.5% / 3
[атрибут *= значение] [src*="kama"] Элементы с атрибутом src, в значении которого присутствует 'kama'. 97.5% / 3
  • есть еще селектор: [атрибут |= значение]. Пример: [lang |= ru] - элементы с атрибутом lang, значение которого равно ru или начинается с ru-, например "ru-RU". Но он практически не используется и его заменяет комбинация: [lang = ru], [lang ^= ru-].

  • Актуальную поддержку браузеров для CSS3 селекторов смотрите по этой ссылке.

Псевдо-классы

Не указывается в разметке HTML-документа. Иногда динамичны - срабатывают при определенном условии (наведение курсора на элемент). Начинаются с двоеточия ':'.

Псевдо-класс Пример Описание Подд. / CSS
:link a:link Выбор всех не посещенных ссылок. 100% / 1
:visited a:visited Выбор всех посещенных ссылок. 100% / 1
:active a:active Выбор активной ссылки. 100% / 1
:hover a:hover Выбор ссылки при наведении курсора мышки. Вместо `<a>` может быть любой элемент 100% / 1
По расположению на одном уровне
:first-child p:first-child Выбор первого дочернего элемента <p>, если у родителя первый элемент именно <p>. 97.53% / 2
:last-child p:last-child Выбор последнего дочернего элемента <p>, если у родителя последний элемент именно <p>. 97.5% / 3
:only-child p:only-child Выбор дочернего элемента <p>, если у родителя вообще всего один элемент и это <p>. 97.5% / 3
:nth-child(n)
p:nth-child(2) Выбор второго дочернего элемента <p>, если второй элемент родителя равен <p>.
p:nth-child(2n) Элементы номер 2, 4, 6…, то есть чётные.
p:nth-child(2n+1) Элементы номер 1, 3, 5…, то есть нечётные.
p:nth-child(3n+2) Элементы номер 2, 5, 8 и так далее.
p:nth-child(even) Четные элементы 2, 4, 6….
p:nth-child(odd) Нечетные элементы 1, 3, 5….
Наглядно [Посмотреть как это работает >](/wp-content/uploads/2015/06/nth-child-posobie.html)
97.5% / 3
:nth-last-child(n) p:nth-last-child(2) Выбор второго дочернего элемента <p> с конца, если второй элемент родителя равен <p>. 97.5% / 2.1
По расположению на одном уровне с тем же тегом
:first-of-type p:first-of-type Выбор первого дочернего элемента <p>. 97.5% / 3
:last-of-type p:last-of-type Выбор последнего дочернего элемента <p>. 97.5% / 3
:only-of-type p:only-of-type Выбор дочернего элемента <p>, если у родителя элемент <p> всего один. 97.5% / 3
:nth-of-type(n) p:nth-of-type(2) Выбор второго дочернего элемента <p>. 97.5% / 3
:nth-last-of-type(n) p:nth-last-of-type(2) Выбор второго дочернего элемента <p> с конца. 97.5% / 3
Поля форм
:enabled input:enabled Выбор включенного <input>. Обычно ``:enabled`` просто не пишется. 97.5% / 3
:disabled input:disabled Выбор выключенного <input>. 97.5% / 3
:focus input:focus Выбор <input>, который находится в фокусе (в который установлен курсор). 100% / 2
:checked input:checked Выбранный элемент <input> типа radio или checkbox. 100% / 2
Остальные
:root :root Выбор корневого элемента в документе. 97.5% / 3
:empty p:empty Пустой элемент <p>, в котором нет ни текста ни элементов. 100% / 2
:lang(язык) p:lang(ru) Выбор элемента <p> с атрибутом lang, значение которого начинается с "ru". 100% / 2
:target :target Выбор активного элемента на странице, который имеет якорную ссылку. 97.5% / 3
:not(селектор) :not(p) Выбор всех элементов, кроме <p>. 97.5% / 3
  • Актуальную поддержку браузеров для CSS3 селекторов смотрите по этой ссылке.

Псевдо-элементы

Элементы, которых реально не существуют в HTML документе. Начинаются с двойного двоеточия ::, но можно и с одинарного :.

Псевдо-элемент Пример Описание Подд. / CSS
::first-letter p::first-letter Выбирает первую букву элемента <p>. 100% / 1
::first-line p::first-line Выбирает первую строку элемента <p>. 100% / 1
::before p::before Вставляет указанное в content:'' содержимое в начало <p>. 100% / 2
::after p::after Вставляет указанное в content:'' содержимое в конец <p>. 100% / 2
::selection p::selection Оформит выделенный (мышкой) текст внутри <p>. Для firefox нужен префикс moz (p::-moz-selection) 71.41% / 3

Объединение селекторов

Для объединения селекторов, используются символы комбинаторы:  , >, +, ~, ,. Они устанавливают взаимосвязь между селекторами.

Комбинатор Пример Описание Подд. / CSS
правило, правило div a, span i Элемент <a> внутри <div> и элемент <i> внутри <span>. 100% / 1
селекторСелектор .c1.c2 Элементы одновременно с двумя классами c1 и c2. 100% / 1
селектор селектор div span Элемент <span> внутри <div>. 100% / 1
селектор > селектор div > span Элементы <span>, у которых родитель <div>. 100% / 2
селектор + селектор div + p Один элемент <p>, который находится сразу после <div>. 100% / 2
селектор ~ селектор div ~ p Все элементы <p>, которые находятся сразу после <div>. 97.5% / 3

Все селекторы CSS (подробно)

*

Универсальный селектор. Выбирает абсолютно все элементы на странице (a,ul,li,div...). Часто используется для сброса стилей всех элементов. Например, такой код обнуляет внутренние и внешние отступы у всех элементов:

* { margin: 0; padding: 0; }

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

#container * { border: 1px solid black; }

Все дочерние элементы #container будут выделяться сплошной черной рамкой шириной 1px.

Применение * создает повышенную нагрузку на браузер, поэтому НЕ используйте его по возможности.

Работает в: IE6 +, Firefox, Chrome, Safari, Opera

Селектор классов. Выбирает на странице элементы, в атрибутах которых стоит значение class=X. Название класса может состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания (- _). Перед названием класса в описании правила должен стоять символ «.».

Например, следующий код устанавливает красный цвет текста для всех элементов класса <div class="error">:

.error { color: red; }

Одному элементу можно указывать несколько классов через пробел: <div class="error text">

Работает в: IE6 +, Firefox, Chrome, Safari, Opera

#X

Селектор по id. Выбирает на странице элемент, в атрибутах которого стоит значение id=X. Это значение называется идентификатор, и должно быть присвоено только одному элементу на странице (впрочем если присвоить несколько, то мир не рухнет и все будет работать). Идентификатор из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания: - _. Начинается он только с буквы!

Например, следующий код устанавливает ширину и отступ элемента с идентификатором: <div id="container">:

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

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

Работает в: IE6 +, Firefox, Chrome, Safari, Opera

X

Селектор HTML тега. Применяться ко всем указанным элементам в документе. Часто используется для задания цвета, фона, шрифта и др.

Например, следующий код задает цвет текста для всех ссылок и отступы для неупорядоченных списков:

a { color: red; }
ul { margin-left: 0; }

Работает в: IE6 +, Firefox, Chrome, Safari, Opera

Х Y

CSS-правило, выбирает элемент Y, который является дочерним к X. Может состоять из нескольких селекторов (X Y Z). Сначала обязательно указывается родитель, а после него дочерние элементы. Их количество может быть любым. Свойства стиле будут применены только к последнему элементу.

Например, следующий код выбирает любой элемент <а>, являющийся потомком элемента <li>: (<li><a href="ссылка">текст</a></li>):

li a { text-decoration: none; }

Это правило можно сочетать с идентификаторами и классами: body.opera a{ color:blue; }.

Работает в: IE6 +, Firefox, Chrome, Safari, Opera

a:link, a:visited, a:hover, a:active

Селекторы псевдоклассов. Задает стиль ссылкам на странице документа в зависимости от их состояния. Псевдокласс :link – устанавливает цвет текста непосещенной ссылке, а псевдокласс :visited – стилизует уже посещенную ссылку. При наведении мыши (под курсором) - a:hover, и в момент нажатия - a:active.

a:link { color: red; } /* можно просто а */
a:visted { color: purple; }
a:hover { color: green; }
a:active { color: blue; }

Все непосещенные ссылки будут красные, а посещенные фиолетовые, а при наведении станут зеленые, а при нажатии на ссылку голубые.

Работает в: IE6 +, Firefox, Chrome, Safari, Opera

Х + Y

Выбирает первый элемент Y, который находится после X (не вложен, а рядом). Стили будут применяться только к последнему элементу X.

Например, следующий код устанавливает красный цвет текста в абзаце p, который расположен сразу после div:

div + p { color: red; }

Получим:

<div>текст</div>
<p>текст 2</p><!-- color: red; -->
<p>текст 3</p>

Демо >

Работает в: IE7+, Firefox, Chrome, Safari, Opera

Х ~ Y

Выбирает все элементы Y, которые расположены после X на одном уровне. По поведению похож на X + Y. Разница в том, что будут выбраны все следующие элементы, а не только первый.

Например, в указанном коде будут выбраны все элементы p, которые расположены после div:

div ~ p { color: red; }

Окрасит  "текст 2" и "текст 3":

<div>текст</div>
<p>текст 2</p><!-- color: red; -->
<p>текст 3</p><!-- color: red; -->

Демо >

Работает в: IE7+, Firefox, Chrome, Safari, Opera

Х > Y

Выбирает элементы Y, которые являются дочерними к X, но выбирается только первый уровень дочерних элементов.

Пример:

.parent > li{ border: 1px solid red; }

Добавит отступ для li первого уровня, т.е. тех который является прямым потомком элемента ul:

<ul class="parent">
	<li> список1
		<ul class="child">
			<li>список11</li>
			<li>список12</li>
		</ul>
	</li><!-- затронет -->
	<li>список2</li><!-- затронет -->
	<li>список3</li><!-- затронет -->
</ul>

Это правило не коснется <ul class="child">.

Демо >

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X[title]

Селектор атрибутов. Выбирает элементы, которые содержат указанный атрибут.

Например, следующий код меняет цвет ссылки при наличии в элементе a атрибутаtitle:

a[title] { color: green; }

Окрасит только "текст":

<a href="" title="описание">текст</a>
<a href="">текст 2</a>

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X[href = "Foo"]

Селектор атрибутов с точным значением. Выбирает элементы, у которых имеется атрибут с указанным значением.

Например, следующий код меняет цвета ссылки на сайт «site.ru»:

a[href="http://site.ru"] { color: red; }

Окрасит только "текст":

<a href="http://site.ru">текст</a><!-- color: red; -->
<a href="http://site.ru/article">текст 2</a>

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X[href *= "site.ru"]

Селектор атрибутов с плавающим значением. В следующем примере, символ «*» говорит селектору о том, что нужное значение может быть в любом месте атрибута href у тега a:

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

Окрасит "текст" и "текст 2":

<a href="http://site.ru">текст</a><!-- color: red; -->
<a href="http://site.ru/article">текст 2</a><!-- color: red; -->
<a href="http://xxx.ru/article">текст 2</a>

Для уточнения выбора можно использовать указатели "^" (в начале строки), "&" (в конце строки) или "~" (точное значение через пробел). См. ниже.

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X[data-* = "foo"]

Это другое применение селектора атрибутов со плавающим значением (см. выше).

Допустим ситуация: необходимо стилизовать все ссылки на изображения. Можно писать несколько правил, занимающих много места, например:

a[href $=".JPG"],
a[href $=". JPEG"],
a[href $=".PNG"],
a[href $=".PNG"],
a[href $=".GIF"] {
	color: red;
}

А можно все это сократить до одного правила, но для этого у каждого элемента должен быть один и тот же атрибут: data-filetype="image". Например все ссылки в HTML имею этот атрибут:

<a href="path/to/file.jpg" data-filetype="image">Ссылка на изображение</a>

Тогда все ссылки на картинки можно выбрать так:

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

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X[href ^= "http"]

Селектор атрибутов со значением в начале. Выбирает элемент, атрибут которого начинается с указанного значения.

Следующий код показывает, как выбрать элементы а, ссылки в которых начинаются на «http»:

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Это css-правило установит фоновую картинку только для "текст":

<a href="http://site.ru">текст</a>
<a href="/article">текст 2</a>

Рекомендуется не добавлять к параметру вышеуказанного поиска дополнительных символом, так как искомая ссылка может начинаться с «https».

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X[href $= ". jpg"]

Селектор атрибутов со значением в конце. "$" - означает конец строки.

Например, выделим элементы, которые ссылаются на файлы определенного расширения. Следующий код выберет ссылки a, ссылающиеся на изображения формата .jpg:

a[href$=".jpg"] { color: red; }

Окрасит только "текст":

<a href="http://site.ru/foto.jpg">текст</a>
<a href="http://site.ru/foto2.png">текст 2</a>

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X[foo ~= "bar"]

Селектор атрибутов с одним из значений разделенных пробелом.

Выбирает элемент у которого в значении атрибута foo есть bar. Он чем-то похож на *=, но если *= ищет указанную строку bar в любом месте значения атрибута, то ~= ищет указанную строку bar которая разделена пробелом. Т.е. bar может быть в начале, середине или конце, где бы он ни был он должен быть разделен пробелом от соседнего значения.

Например такой css код:

a[data-info ~= "external"] { color: red; }

a[data-info ~= "image"] { border: 1px solid black; }

Отработает так:

<a href="http://site.com" data-info="external">текст</a><!-- окрасит в красный -->

<a href="http://nettuts.com">текст 2</a><!-- не тронет -->

<a href="http://site.com" data-info="external image">текст 3</a><!-- окрасит и установит рамку -->

<a href="http://site.com" data-info="image">текст 4</a><!-- установит рамку -->

Об этом селекторе не многие знают, а ведь он иногда очень удобен.

Работает в: IE7+, Firefox, Chrome, Safari, Opera

:target

Селектор псевдоклассов. Выделяет активный якорь в HTML. Допустим у нас ссылка ссылается на внутренний якорь <a href="#anchor"> на странице, тогда при клике по этой ссылке этот селектор выделить элемент имеющий атрибут id="anchor".

:target { color: red; }

Получим:

<a href="#anchor1">Перейти на якорь 1</a>
<a href="#anchor2">Перейти на якорь 2</a>

<!-- При клике по этим ссылкам выберется соответствующий элемент ниже -->

<p id="anchor1">Элемент 1</p>
<p id="anchor2">Элемент 2</p>

смотрите пример >

Работает в: IE9+, Firefox 3.5+, Chrome, Safari 3.2+, Opera 9.6+

X:checked

Селектор псевдоклассов. Стилизует включенные radio или checkbox. Обычно применяется для выделения текста. Может использоваться с input или option или просто без них: input:checked, option:checked или :checked.

Например, следующий код выделяет сплошной черной рамкой в 1px область возле включенного флажка:

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

Работает в: IE9+, Firefox, Chrome, Safari, Opera

X::before

Селектор псевдоэлементов. Добавляет элемент в начало X (внутрь тега). Работает только совместно со свойством content, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое (content:''), т.к. элемент должен хоть что-то содержать.

Когда-то все браузеры реализовали эти псевдоэлементы с одним двоеточием: :after/:before.
Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно.

Например с помощью таких стилей, можно указать значок для LI списка:

li:before {
	content: '?';
	display: inline-block;
	margin-right: .5em;
}

Получим:

  • ? элемент 1
  • ? элемент 2

Работает в: IE8+, Firefox, Chrome, Safari, Opera

X:after

Селектор псевдоэлементов. Добавляет элемент в конец X (внутрь тега). Работать только совместно со свойством content, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое (content:''), т.к. элемент должен хоть что-то содержать.

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

.clear:after {
	content: '';
	display: table;
	clear: both;
}

Работает в: IE8+, Firefox, Chrome, Safari, Opera

X:hover

Селектор псевдокласса. Срабатывает только при наведении мышки на элемент, когда курсор над элементом. Может применяться для любых элементов (div, span) не только ссылок <a>.

В следующем примере при наведении мышкой под ссылкой будет появляться черная линия толщиной 1px (замена свойству underline):

a:hover {  border-bottom: 1px solid black; }

А в следующем коде показано изменение цвета фона при наведении на элемент <div>:

div:hover { background: #e3e3e3; }

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X:not(selector)

Селектор псевдокласса. Выбирает элементы, которые не содержат указанного селектора. Вместо "selector" может быть любой селектор, кроме псевдоэлементов (:first-letter). Двойное отрицание запрещено - :not(:not(...)).

Например, следующий код выбирает для стилизации все элементы, кроме элемента p:

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

А в этом примере выбираются все элементы li, у которых нет класса .last:

ul li:not(.last) { color: blue; }

Выберет "элемент 1" и "элемент 2":

<ul>
	<li>элемент 1</li>
	<li>элемент 2</li>
	<li class="last">элемент 3</li>
</ul>

Работает в: IE9+, Firefox, Chrome, Safari, Opera

X::first-line, X::first-letter

Селектор псевдоэлементов. ::first-line стилизует начальную строку.
::first-letter стилизует начальную букву. Изменяются только шрифт, цвет текста, фон, а также сильно привязан к множеству параметров: ширина окна браузера, язык, шрифт и т.п.

С CSS 2.1, для различия, принято псевдоэлементы помечать двойным двоеточием "::", а псевдоклассы одинарным ":".

Эти селекторы можно записывать с одним двоеточием :first-line, но двойное ::first-line предпочтительнее.

В следующих примерах показано, как использовать указанные псевдоэлементы:

#1 Выбираем первую букву в параграфе

p::first-letter {
	float: left;
	font-size: 2em;
	font-weight: bold;
	font-family: cursive;
	padding-right:2px;
}

Применит указанные стили для всех начальных букв всех абзацев в документе.

#2 Выбираем первую строку в абзаце

p::first-line {
	font-weight: bold;
	font-size: 1.2em;
}

Применит указанные стили для всех начальных строк всех абзацев в документе.

Работает в: IE6+, Firefox, Chrome, Safari, Opera

X:nth-child(n)

Выбирает каждый "n-ый" элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X, т.е. любой тип, а не только тип X.

Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще...

Особенность: есть такой же селектор :nth-of-type(n) разница между ними в том, что X:nth-child(n) считает все элементы на одном уровне, не важно какой тип указан в Х, а Х:nth-of-type(n) считает только элементы типа Х находящиеся на одном уровне. Например:

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- p:nth-child(2) -->
<p>Второй параграф.</p><!-- p:nth-of-type(2) -->

"n" может быть:

  • odd (нечетные),
  • even (четные),
  • число (порядковый номер с 1)
  • и выражение (an+b, a и b целые числа, n — счетчик от 0).
  • смотреть на примере >

n - odd или even

Раскрасим четные и нечетные параграфы в разные цвета:

p:nth-child(odd) {
	background: red;
}
p:nth-child(even) {
	background: blue;
}

Получим:

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- blue -->
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p><!-- blue -->

n - число

Установит красным цветом второй элемент:

p:nth-child(2) { color: red; }

Окрасит "Второй параграф.":

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- red -->
<p>Второй параграф.</p>
<p>Третий параграф.</p>

n -  выражение

Формула выражения: an + b, где "a" - число, которое будет умножаться на n, "n" - счетчик от 0-999, "b" - число, отступ. { an + b; n = 0, 1, 2, ... }

  • в селекторе :nth-child(2) указана только "а".

  • :nth-child(odd) можно заменить на :nth-child(2n+1) - 1, 3, 5, 7 ...

  • :nth-child(even) можно заменить на :nth-child(2n) - 2, 4, 6, 8 ...

  • :nth-child(3n+4) - 4, 7, 10, 13 ...

  • :first-child можно заменить на :nth-child(0n+1) или :nth-child(1)

  • смотреть пример →

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

 p:nth-child(3n) { background: red; }

Получим:

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p><!-- background: red -->
<p>Параграф 3</p>
<p>Параграф 4</p>
<p>Параграф 5</p><!-- background: red -->
<p>Параграф 6</p>
<p>Параграф 7</p>
<p>Параграф 8</p><!-- background: red -->
<p>Параграф 9</p>

Работает в: IE9 +, Firefox 3,5 +, Chrome, Safari

X:nth-last-child(n)

Выбирает начиная с конца. Работает точно также как и предыдущий :nth-child(n) только отсчет идет не сверху, а снизу.

Также вместо n  может быть:

  • odd - нечетные
  • even - четные
  • число - порядковый номер с 1
  • выражение an+b, где a и b целые числа, n — счетчик от 0 до 999).

Например, следующий код установит красным цветом второй с конца параграф:

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

Окрасит "Второй параграф.":

<h1>Заголовок</h1>
<p>Первый параграф.</p>
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p>

Еще примеры смотрите в предыдущем селекторе :nth-child(n).

Работает в: IE9 +, Firefox 3,5 +, Chrome, Safari

X:nth-of-type(n)

Выбирает элемент по номеру указанному в "n". Начинает отсчет от первого элемента типа X находящегося на одном уровне.

Под типом подразумевается именно тег элемента (div, span, li), а не его класс...

Особенность: есть такой же селектор :nth-child(n) разница между ними в том, что X:nth-of-type(n) выберет только элементы типа Х находящиеся на одном уровне, а X:nth-child(n) считает все элементы всех типов на одном уровне, не важно какой тип указан в Х. Например:

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- p:nth-child(2) -->
<p>Второй параграф.</p><!-- p:nth-of-type(2) -->

"n" может быть:

  • odd - нечетные
  • even - четные
  • число - порядковый номер с 1
  • выражение an+b, где a и b целые числа, n — счетчик от 0 до 9999.

#1 n - add или even

Раскрасим четные и нечетные параграфы в разные цвета. Считает именно параграфы без h1, как это делает :nth-child:

p:nth-of-type(odd)  { background: red; }
p:nth-of-type(even) { background: blue; }

Получим:

<h1>Заголовок</h1>
<p>Первый параграф.</p><!-- red -->
<p>Второй параграф.</p><!-- blue -->
<p>Третий параграф.</p><!-- red -->

#2 n - число

Установит красным цветом второй элемент:

li:nth-of-type(2) { color: red; }

Окрасит "Второй параграф.":

<h1>Заголовок</h1>
<p>Первый параграф.</p>
<p>Второй параграф.</p><!-- red -->
<p>Третий параграф.</p>

#3 n -  выражение

Формула выражения: an + b, где "a" - число, которое будет умножаться на n, "n" - счетчик от 0-999, "b" - число, отступ. { an + b; n = 0, 1, 2, ... }

  • в селекторе :nth-of-type(2) указана только "а".

  • :nth-of-type(odd) можно заменить на :nth-of-type(2n+1) - 2, 4, 6, 8 ...

  • :nth-of-type(even) можно заменить на :nth-of-type(2n) - 1, 3, 5, 7 ...

  • :nth-of-type(3n+4) - 4, 7, 10, 13 ...

  • :first-of-type можно заменить на :nth-of-type(0n+1) или просто :nth-of-type(1)

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

 p:nth-of-type(3n) { background: red; }

Получим:

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p><!-- background: red -->
<p>Параграф 4</p>
<p>Параграф 5</p>
<p>Параграф 6</p><!-- background: red -->
<p>Параграф 7</p>
<p>Параграф 8</p>
<p>Параграф 9</p><!-- background: red -->

Работает в: IE9 +, Firefox 3,5 +, Chrome, Safari

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

Селектор псевдокласса. Выбирает элемент по номеру указанному в "n". Начинает отсчет от последнего элемента X находящегося на одном уровне.

Это такой же селектор как и предыдущий :nth-of-type(n) только считает наоборот, с конца.

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

 p:nth-last-of-type(3n) { background: red; }

Получим:

<h1>Заголовок</h1>
<p>Параграф 1</p><!-- background: red -->
<p>Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p><!-- background: red -->
<p>Параграф 5</p>
<p>Параграф 6</p>
<p>Параграф 7</p><!-- background: red -->
<p>Параграф 8</p>
<p>Параграф 9</p>

Еще примеры смотрите в предыдущем селекторе :nth-of-type(n).

Работает в: IE9 +, Firefox 3,5 +, Chrome, Safari, Opera

X:first-child

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

X:first-child это тоже самое что X:nth-child(1)

#1 Пример: обратимся к первому элементу в блоке #container

 #container div:first-child{ color:red; }

Получим:

<div id="container">
	<div>элемент 1</div><!-- color:red; -->
	<div>элемент 2</div>
</div>

А вот так не выделит ничего:

<div id="container">
	<h1>Заголовок</h1>
	<div>элемент 1</div><!-- не выделит -->
	<div>элемент 2</div>
</div>

#2 Обнуление границы

:first-child часто используется для обнуления свойства border на граничных элементах списка:

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

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

Работает в: IE7+, Firefox, Chrome, Safari, Opera

X:last-child

Селектор псевдокласса. Выбирает первый с конца элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно X.

X:last-child это тоже самое что X:nth-last-child(1)

#1 Пример: обратимся к первому с конца элементу в блоке #container

 #container div:last-child{ color:red; }

Получим:

<div id="container">
	<div>элемент 1</div>
	<div>элемент 2</div><!-- color:red; -->
</div>

А вот так ничего не выделит:

<div id="container">
	<div>элемент 1</div>
	<div>элемент 2</div><!-- не выделит -->
	<p>параграф</p>
</div>

#2  Покрасим последний элемент li в списке ul в зеленый:

ul > li:last-child { color: green; }

Получим:

<ul>
	<li>список 1</li>
	<li>список 2</li>
	<li>список 3</li><!-- color: green; -->
</ul>

Работает в: IE9 + (IE8 поддерживает :first-child , но не поддерживает :last-child), Firefox, Chrome, Safari, Opera

X:first-of-type

Селектор псевдокласса. Выбирает первый элемент указанного типа X, который находится на одном уровне с X. Считает только элементы X.

X:first-of-type это тоже самое что X:nth-of-type(1)

#1 Пример: обратимся к первому элементу div в блоке #container

 #container div:first-of-type{ color:red; }

Получим:

<div id="container">
	<h1>Заголовок</h1>
	<div>элемент 1</div><!-- color:red; -->
	<div>элемент 2</div>
</div>

#2 Обнуление границы

:first-of-type часто используется для обнуления свойства border на граничных элементах списка:

ul li:first-of-type { border-top: none; }

Получим:

<ul>
	<span>текст</span>
	<li>элемент 1</li><!-- border-top: none; -->
    <li>элемент 2</li>
	<li>элемент 3</li>
</ul>

Работает в: IE9 +, Firefox 3,5 +, Chrome, Safari, Opera

X:only-child (если один элемент в блоке)

Селектор псевдокласса. Выбирает элемент X, который единственный на уровне X. При подсчете элементов название тега X НЕ учитывается.

Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов (неважно какой тип) равно 1.

Например, выберем элемент, если он единственный в блоке:

p:only-child { background: red; }

Получим:

<div>
	<p>параграф</p><!-- background: red; -->
</div>

<div>
	<span>параграф</span><!-- не выберет, потому что X=p а не span -->
</div>

<div>
	<p>текст</p><!-- не выберет, потому что на этом уровне 2 элемента -->
	<span>параграф</span>
</div>

Работает в: IE9+, Firefox, Chrome, Safari, Opera

X:not(:only-child) (если больше чем один элемент в блоке)

Чтобы выбрать все элементы блока, только в том случае, если в этом блоке всего больше чем один элемент, используем :only-child с отрицанием :not():

li:not(:only-of-type) {
  font-size: 1.25em;
}

В результате если у нас один элемент он выбран не будет:

<ul>
	<li></li><!-- не будет выбран -->
</ul>

А если больше одного, то будут выбраны все:

<ul>
	<li></li><!-- будет выбран -->
	<li></li><!-- будет выбран -->
</ul>

X:only-of-type (если один элемент типа X в блоке)

Селектор псевдокласса. Выбирает элемент X, который единственный на уровне X (не имеет соседей). При подсчете элементов название тега X учитывается.

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

Например:

p:only-of-type { background: red; }

Получим:

<div>
	<p>параграф</p><!-- background: red; -->
</div>

<div>
	<span>параграф</span><!-- не выделится, потому что X=p а не span -->
</div>

<div>
	<span>параграф</span>
	<p>текст</p><!-- background: red; -->
</div>

#1 Выберем ul только с одним элементом в списке.

ul > li:only-of-type { font-weight: bold; }

Другой вариант: можно ul > li:only-child, потому что обычно в списках ul находятся только li теги.

Работает в: IE9 +, Firefox 3,5 +, Chrome, Safari, Opera

Немного практики

#1 Сложное выделение

У нас есть такой код:

<div>
	<p>параграф</p>
	<ul>
       <li>Список 1 </li>
       <li>Список 2 </li>
	</ul>

	<ul>
       <li>Список 3 </li>
       <li>Список 4 </li>
	</ul> 
</div>

Как обратиться к "Список 2"?

-

Решение 1

ul:first-of-type > li:nth-child(2) { font-weight: bold; }

Код находит первый список, затем находит его прямого наследника и у которого порядковый номер в списке равен 2.

Решение 2

Использование соседних селекторов.

p + ul li:last-child { font-weight: bold; }

Браузер находит ul, следующий сразу за p, затем находит его последний дочерний элемент.

Решение 3

Это решение пожалуй самое правильное, потому что если между ul или li попадут другие теги, этот пример все равно будет выбирать нужный нам li:

ul:first-of-type li:nth-last-of-type(1) { font-weight: bold; }

Браузер выбирает первый ul (именно ul), затем находит первый с конца элемент li (именно li).

Наглядное пособие по селекторам типа :nth-child

Чтобы быстро и точно понять как работают псевдо-селекторы типа :first-child.

перейдите на эту страницу

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

Считаем элементы в блоке с помощью nth-child

Полезная статья на Хабре - количественные CSS селекторы, учит считать элементы с помощью nth-child. Например, нужно выделить первый элемент, только, если в блоке 6 элементов указанного типа. Или, нужно выделить все элементы блока, если в блоке всего 6 элементов.

Диапазон элементов в селекторе

Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}

Видео на десерт: CSS селекторы

Последнее из: css
CSS селекторы 24 комментария
Полезные 4 Все
  • Спасибо за статью. В моем понимании :first-child и :first-of-type отличаются не намного, но отличаются. К примеру:

    <div class="name"></div>
    <p class="name"></p>
    <div class="name"></div>
    <i class="name"></i>
    <div class="name"></div>
    <p class="name"></p>
    <i class="name"></i>

    именно

    :first-of-type

    думаю необходим когда на одном уровне есть элементы с одним классом, а выбрать нужно именно первый элемент i с классом .name

    i.name:first-of-type {}
    Ответить2.3 года назад #
  • Владимир

    Есть два селектора - one и two, сначала идёт one потом two, как сделать функцию x + y - наоборот, что бы при one + two стиль привязывался не к two а к one?

    Ответить2.1 года назад #
    • Kama4464

      По-моему никак (уверен на 99%). В CSS нельзя привязать стили к предыдущему селектору в правиле... Я такого ни разу не видел. Мне иногда этого очень не хватало - это вообще открыло бы кучу возможностей...

      1
      Ответить2.1 года назад #
  • campusboy1848 cайт: wp-plus.ru

    Рад помочь. Кстати, месяц назад наткнулся на эту статью, очень крутая справка, шикарная я бы сказал. Зашёл и поглядел - не надо нигде искать по пунктикам.

    Пока пробежал её глазами, чуть по чуть на практике повторяю все пункты. Возник вопрос, осуществимо ли это. К примеру, есть структура:

    <div class="container">
    	<div class="row1"></div>
    	<div class="row2">
    		<img class="images" src="url">
    	</div>
    </div>
    <div class="container">
    	<div class="row1"></div>
    	<div class="row2">
    		<img class="images" src="url">
    	</div>
    </div>

    Как мне управлять картинками только с помощью псевдоклассами? Немного поясню. На это месте может быть не картинка, а параграф или div. К примеру, я пытался через nth-child(n), что то типа:

    .images:nth-child(1) {padding:5px}
    .images:nth-child(2) {padding:10px}

    Ничего не вышло, где-то косячу!

    Ответить2.1 года назад #
    • Kama4464

      :nth-child ищет элементы на одном уровне, а тут они вложены. Надо так:

      .container:nth-child(1) .images{ padding:5px }
      .container:nth-child(2) .images{ padding:10px }

      Между контейнерами могут быть другие элементы (не div) с другими классами, чтобы они не мешались лучше использовать :nth-of-type. В принципе ничего не теряем:

      .container:nth-of-type(1) .images{ padding:5px }
      .container:nth-of-type(2) .images{ padding:10px }

      Вот: http://codepen.io/dowhile/pen/vOwvWY

      Ответить2.1 года назад #
      • campusboy1848 cайт: wp-plus.ru

        То что нужно, спасибо большое smile Что-то вёрстка сложнее дается, чем программирование. С меня пиво или кефир, по желанию! good

        Ответить2.1 года назад #
  • campusboy1848 cайт: wp-plus.ru

    А в CSS есть что-нибудь типа копирования? Сейчас изучаю bootstrap, натягиваю на WP. Чтобы изначальный фреймворк не редактировать, я его переопределяю в style.css. Можно как-то классы копировать, что-то типа:

    .list-group = .my_list

    Ну а потом работать со своим классом smile

    Ответить2 года назад #
  • campusboy1848 cайт: wp-plus.ru

    Не могу понять различия между методами Х~У иХ+У. По примерам - это одно и тоже.

    Ответить2 года назад #
    • Kama4464

      Х+У
      Выбирает первый элемент Y, который находится после X.

      Х~У
      Выбирает все элементы Y, которые расположены после X.

      Что тут не понятно?

      Ответить2 года назад #
      • campusboy1848 cайт: wp-plus.ru

        Извините, ошибся при написании.Х~У и Х>У имел в виду.

        Ответить2 года назад #
        • Kama4464

          Изменил описание, на такое:

          Х > Y

          Выбирает элементы Y, которые являются дочерними к X, но выбирается только первый уровень дочерних элементов.

          ul > li{ color:red; }
          <ul>
          	<li><!-- color:red-->
          		<ul>
          			<li></li>
          			<li></li>
          		</ul>
          	</li>
          	<li></li><!-- color:red-->
          	<li></li><!-- color:red-->
          </ul>

          Так вроде понятнее, чем было.

          2
          Ответить2 года назад #
          • campusboy1848 cайт: wp-plus.ru

            Спасибо, да, так понятнее. Получается, в Х~У

            div ~ p { color: red; }
            <div>текст 1</div>
            <p>текст 2</p><!-- color: red; -->
            <p>текст 3</p><!-- color: red; -->
            <div>текст 4</div>
            <p>текст 5</p><!-- Не затронет -->
            <p>текст 6</p><!-- Не затронет -->

            Я правильно понял?

            Ответить2 года назад #
            • Kama4464

              Ну, почти:

              div ~ p { color: red; }
              <div>текст 1</div>
              <p>текст 2</p><!-- color: red; -->
              <p>текст 3</p><!-- color: red; -->
              <div>текст 4</div>
              <p>текст 5</p><!-- color: red; -->
              <p>текст 6</p><!-- color: red; -->

              https://jsfiddle.net/kamaev/8vme5h94/

              Ответить2 года назад #
  • dimmel

    Подскажите, а можно ли решить такую проблему селекторами. Нужно выбрать каждую 3 картинку внутри слоя, но проблема в том, что картинки обернуты ссылками и уже дочерними не являются.

    <div class="ban">
    <a href="/" ><img class="iban" src="img/ban1.jpg"></a>
    <a href="/" ><img class="iban" src="img/ban2.jpg"></a>
    <a href="/" ><img class="iban" src="img/ban3.jpg"></a>
    <a href="/" ><img class="iban" src="img/ban4.jpg"></a>
    <a href="/" ><img class="iban" src="img/ban5.jpg"></a>
    <a href="/" ><img class="iban" src="img/ban6.jpg"></a>
    </div>
    Ответить1.9 года назад #
  • Приветствую!

    Хочется остановиться на двух моментах пока что:

    1) Сначала не работал :last-child внутри<body>, оказалось, что даже если добавить <script> после вот так:

    <body>
    </body>
    <script>
    </script>

    то считается, что <script> все равно находится внутри <body> dash
    Как бы логично, но как бы не совсем очевидно, если искать проблему в другом месте. Может кому будет полезным. Джессика опять ты меня подвела.

    2) На счет селектора псевдоклассов :not (отрицающий селектор?)
    Из примера выше:

    Например, следующий код выбирает для стилизации все элементы, кроме элемента p:

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

    Это не работает (не поленился - проверил).

    Как я понимаю для отрицания, нужно чтобы элементы находились на одном уровне)

    А в записи выше используется селектор * который выбирает все элементы страницы, в том числе и <body>. Далее проверяется есть ли на одном уровне с <body> элементы <p>. И если таковые есть, к ним бы не применялся стилевой параметр(свойство) color.

    Однако таковых нет, поскольку <p> является дочерним элементом . В следствие этого весь документ будет "написан" зеленым шрифтом. Поскольку color наследуемый параметр.

    Поэтому, если мы действительно хотим выделить все элементы на странице кроме абзацев (а мы вроде как хотим), то следует писать так:
    body :not(p) {color: green}
    и не забываем про пробел между body и :not (иначе опять будет проверять на одном уровне с body)

    Ну и само собой, "вложенность" не поддерживается.. вроде бы -)

    Поправьте, если я не прав. Я только учусь wink

    Ответить1.5 года назад #
    • Kama4464

      Это не работает (не поленился - проверил).

      Как вы проверили? Работает же: https://jsfiddle.net/uw2zh1a3/6/

      Как я понимаю для отрицания, нужно чтобы элементы находились на одном уровне)

      Это не так, зависит от предыдущего селектора

      div > *:not(p){}

      Вот на одном уровне....

      и не забываем про пробел между body и :not

      Это вообще не корректная запись, насколько я знаю :not() должен относиться к чему-то, но не к пробелу...

      Вы правы, но не совсем, то что вы говорите это каскадность, когда одно накладывается на другое и при создании селекторов, особенно при использовании * это нужно продумывать. Обычно указываются конкретные селекторы: классов или тегов и таких накладок не возникает. У меня в статье это общий пример, с практикой имеющий мало общего. Такую запись *:not(p) я никогда не видел и сам не использовал, в ней слишком много нужно учесть - это ни к чему на практике...

      Я не знаю как вы проверяли, но думаю, если вы скините свой пример, я вам смогу объяснить почему у вас "не работает". Вы вероятно что-то не учли кажется что что-то работает не так...

      Ответить1.5 года назад #
      • То что пример сугубо теоретический это понятно даже мне. Но теория и нужна для того, чтобы понять принцип работы того или иного механизма/явления.

        Как вы проверили? Работает же: https://jsfiddle.net/uw2zh1a3/6/

        Ну вы первое правило в css уберите, и оставьте только второе. И будет как раз "мой пример".
        А вот еще аналогичный, но вместо * у меня div - https://jsfiddle.net/8c2x8og8/
        То о чем я говорю, это составные селекторы X Y, например https://jsfiddle.net/fp6xuLh4/
        Только вместо Y у меня "ничего(а конкретнее какой-то любой дочерний элемент)", а пробел это просто способ показать браузеру, что это составной селектор)
        Вот у вас второй пример там же с составными селекторами как раз,
        правило то применяется не к ul, а к li (ul li)

        ul li:not(.last) { color: blue; }

        И вы говорите, что зависит от предыдущего селектора, но если я напишу просто
        ul:not(.last) { color: blue; }
        И при этом не укажу li перед :not, то мы получим весь список синим.
        Однако так: li:not(.last) {color: blue} будет работать как надо.
        Отсюда я и сделал вывод, что "аргумент" у :not(то что в скобках) и то что перед :not, должны находится на одном уровне dash

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

        Ответить1.5 года назад #
        • Kama4464

          Тут все логично, вы что-то не так понимате и путаетесь. Но это нормально - это процесс обучения, так часто бывает, со временем все в голове встанет на места...

          Ваша ошибка в https://jsfiddle.net/8c2x8og8/

          <div id="main">
            <div> div </div>
            <span> span </span> <br>
            <p> para <p>
            <em> em </em>
          </div>

          стили

          #main {color: red}
          #main:not(p) {color: green}

          Во-первых: у вас p тег не закрыт smile

          Во-воторых: #main это ID элемента div и этот элемент всегда :not(p) - это не p - это div и поэтому это условие будет срабатывать всегда. Т.е. запись #main:not(p) означает - все элементы, кроме p с id=main.

          Значит запись

          #main {color: red}
          #main:not(p) {color: green}

          Равносильна

          #main {color: red}
          #main {color: green}

          И конечно все внутри #main будет зеленым! Это и происходит...

          Чтобы только p сделать красным, нужно написать так:

          #main {color: red}
          #main *:not(p) {color: green}

          т.е. первая строка делает все тексты в main красными, а вторая перебивает её и говорит сделать все зеленым кроме p.

          Логичнее так:

          #main {color: green}
          #main p {color: red}

          :not() тут не совсем подходит...

          смотрите: https://jsfiddle.net/8c2x8og8/1/

          Область действия стилей ограничивается только тем элементом к которому эти стили применяются. Однако в браузере по умолчанию все элементы имеют свои свойства. Например свойство color по умолчанию у всех элементов равно inherit - наследовать от родителя. А значит если мы родителю укажем красный цвет текста, то все вложенные элементы будут наследовать этот цвет и тоже будут красные, если только не указать другое... И кажется, что свойство color как бы распространяется на текущий и все вложенные элементы, хотя технически это не так...

          Пробел в CSS отделяет селектор и переводит его на вложенный элемент, а если пробела нет, то все селекторы относятся к одному элементу. Например: #main:not(p) - это 2 селектора, которым должен соответствовать один элемент: у элемента должен быть id=main и тег не P. Также, как например: .foo.bar - будет влиять на элемент у которого есть сразу 2 класса foo и bar... Еще такой пример input[type="text"] - 2 селектора для одного элемента. ПО аналогии можно добавить еще селекторов, например input[type="checkbox"].foo - 3 селектора: input с типом checkbox и классом foo... Или вот еще пример input[type="checkbox"]:not(:checked) - сами скажите что это значит smile

          1
          Ответить1.5 года назад #
          • Во-воторых: #main это ID элемента div и этот элемент всегда :not(p) - это не p - это div и поэтому это условие будет срабатывать всегда. Т.е. запись #main:not(p) означает - все элементы, кроме p с id=main.

            Сначала прочитал как
            <p id="main"> </p>
            Но как понимаю вы имели ввиду, все элементы кроме p и у этих элементов должен быть id="main" Что кстати да в примере ниже, сначала не понял какой верный вариант даже.

            Например: #main:not(p) - это 2 селектора, которым должен соответствовать один элемент: у элемента должен быть id=main и тег не P.

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

            *:not(p)

            Означает что элемент должен быть не <p> и любой. Но поскольку color наследуемый параметр, создается впечатление что пример выше не рабочий, если только не указать выше явно color для *
            Если бы там был border (не наследуемый) все было бы лучше для меня search
            Однако, если использовать составной(upd. контекстный) селектор, скажем так
            * body *:not(p) {color: red}
            то не имеет значения наследуемый параметр или нет, потому что мы обращаемся ко всем элементам на одном уровне(блин, уровень наверное не корректно говорить(понять бы границы этого уровня, как то не смог нагуглить вчера), я имею ввиду, что все элементы сестринские, а значит и наследования нет), и ищем элемент там smile
            Вооот, а дальше объясните мне разницу, пожалуйста, между:

            ul li:not(.last) /* для примера, понимаю что только к элементам <li> */
            ul *:not(.last)
            ul :not(.last)

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

            input[type="checkbox"]:not(:checked) - сами скажите что это значит smile

            Судя по всему это значит "выбрать все флажки, которые не чекнуты"
            Хотя вроде бы есть unchecked или я путаю с джес? Весь вопрос не в том, как работает селектор, а в том, в каком диапазоне он работает. В том плане, что подразумевается перед input в CSS? Я так понимаю он выбирает все input в документе независимо от их вложенности :-?
            Еще вопрос, а можно ли сделать дефалтно наследуемый параметр типа color-a не наследуемым? inherit наоборот -) Прошу прощения если много букв.

            P.S. очень хочу title к кнопке "редактировать", долго вчера не решался нажать на карандаш smile А и ссылки у вас четко выделяются good это scale?
            upd. чутка освежил в памяти теорию, таки составные селекторы это как раз ваш пример с чекбоксом, а то, что я выше называл составными, это контекстные селекторы (пробел + ~ >)

            Ответить1.5 года назад #
            • Kama4464
              ul *:not(.last)
              ul :not(.last)

              Это одно и тоже... Но мне понятнее первая строка, вторая меня смущает и может запутать, потому что очень похожа на ul:not(.last).

              Строку ul li:not(.last) лучше записать так:

              ul > li:not(.last)

              Потому что без > условие будет проверяться для все вложенных элементов и вложенных у вложенных и т.д. А с > мы ограничиваем поиск по только первому уровню вложенности т.е. только для LI и не того что внутри LI. И так и так будет работать, но производительнее и стабильнее с >.

              Весь вопрос не в том, как работает селектор, а в том, в каком диапазоне он работает. В том плане, что подразумевается перед input в CSS?

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

              input{}
              input[type="checkbox"]{}
              .foo{}

              Тут браузер ищет подходящий элемент во всем документе: любая вложенность.

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

              .content input{}
              .content p{}

              Тут браузер ищет элемент по первому селектору .content во всем документе, далее в найденных ищет элементы input и p. Т.е. в этом примере диапазон действия input и p ограничен элементом .content...

              Очевидные вроде бы вещи говорю smile

              1
              Ответить1.5 года назад #
              • Очевидные вроде бы вещи говорю smile

                Никто и не спорит, вопрос надо было озвучить так: изменяются ли стандартные правила при работе с селекторами вместе с описанными в статье псевдоклассами?
                Как работают контекстные селекторы мне вполне и давно понятно спасибо. Равно как и составные класс1.класс2 Как я уже говорил проблема была именно в наследуемом параметре. Я просто взял пример выше, и тупо вставил его в документ
                *:not(p) {color: green}
                Никаких * {color: red} я не добавлял. В итоге получил весь документ зеленым, и далее не правильно интерпретировал механизм работы селекторов псевдоклассов, решив что возможно подключается какая-то другая логика. С этим разобрался, спасибо большое за ваше время.
                Перечитал еще разок статью, нашел немного опечаток:

                в описании селектора псевдоэлементов :before
                Работать только совместно со свойством
                Работает? Будет работать?
                в описании селекторов x:nth-child(n); x:nth-of-type(n)

                #1 n - add или even
                Видимо odd вместо add ;

                #3 n - выражение ...

                nth-child(odd) можно заменить на :nth-child(2n+1) - 2, 4, 6, 8 ...

                nth-child(even) можно заменить на :nth-child(2n) - 1, 3, 5, 7 ...
                Несоответствие формул и примеров, как я понимаю должно быть так:
                2n+1 - 1, 3, 5, 7 ...
                2n - 2, 4, 6, 8 ...
                в описании селектора X[data-* = "foo"]
                селектора атрибутов со плавающим значением

                И еще пара вопросов опять

                1) Пример в описании селектора :after

                .clear {
                	*display: inline-block;
                	_height: 1%;
                }

                Что за * и _ перед свойствами?

                2) Пример в описании селектора *

                Например, такой код обнуляет внутренние и внешние отступы у всех элементов:
                * { margin: 0; padding: 0; }
                Для того, чтобы это работало нужно добавлять !important?

                Ответить1.5 года назад #
                • Kama4464

                  Поправил ошибки, спасибо!

                  Насчет вопрос

                  .clear {
                  	*display: inline-block;
                  	_height: 1%;
                  }

                  Это костыль для работы в IE, какой-то старой версии. Удалил это из статьи, уже вроде бы не актуально...

                  * { margin: 0; padding: 0; }

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

                  Сегодня такой подход не используется уже, хотя он и актуален. Сегодня лучше использовать вместо этого сброса такой: normalize.css

                  Ответить1.5 года назад #

Здравствуйте, !

Ваш комментарий