First child css not: css - not:first-child selector

Содержание

Псевдокласс :only-child | CSS | WebReference

Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у родителя.

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :only-child без указания селектора выберет все единственные элементы и установит для них красный цвет текста. Здесь единственным будет элемент <time>, поскольку он является единственным дочерним элементом у своего родителя <p>.

article :only-child { color: red; }

При добавлении селектора к :only-child сперва рассматриваются все единственные дочерние элементы у своих родителей, затем проверяется, относятся ли они к указанному типу. Если эти два условия совпадают (в данном случае единственный элемент и элемент <h2>), тогда заголовок окрасится красным цветом. Поскольку <h2> не является единственным и кроме него есть другие элементы (<p> и <address>), то ничего выбрано не будет.

article h2:only-child { color: red; }

Вместо :only-child можно использовать комбинации :first-child:last-child или :nth-child(1):nth-last-child(1).

Синтаксис

Селектор:only-child { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Примечание

В Safari до версии 3.0 псевдокласс :only-child воспринимается как :first-child.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.08.2018

Редакторы: Влад Мержевич

Псевдо-класс :first-child — первый элемент

Поддержка браузерами


12.0+	7.0+	3.0+	4.0+	9.6+	3.1+

Описание

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

Ниже мы рассмотрим пример с псевдо-классом :first-child, применённым к элементу <p>. Обратите внимание, что стиль применяется только к первому, расположенному в коде, элементу <p> и третьему, так как первый элемент является и первым дочерним элементом для <body>, а третий будет первым дочерним элементом уже относительно <div>.

Пример:


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      p:first-child { color: red; }
    </style>
  </head>

  <body>

    <p>Этот абзац является первым дочерним элементом своего родителя(body).</p>
    <h2>Добро пожаловать!</h2>
    <p>Этот абзац является третьим дочерним элементом своего родителя(body).</p>

    <div>
      <p>Этот абзац является первым дочерним элементом своего родителя(div).</p>
      <p>Этот абзац является вторым дочерним элементом своего родителя(div).</p>
    </div>

  </body>
</html>

Результат данного примера:

Этот абзац является первым дочерним элементом своего родителя(body).

Добро пожаловать!

Этот абзац является третьим дочерним элементом своего родителя(body).

Этот абзац является первым дочерним элементом своего родителя(div).

Этот абзац является вторым дочерним элементом своего родителя(div).

Псевдокласс :not в CSS. Примеры использования

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

Псевдокласс :not, по сути, позволяет нам исключить один или несколько тегов по указанному селектору из css-форматирования с заданными правилами. Общий вид записи селектора с использованием этого псевдокласса таков:

селектор1:not(селектор2) { свойства }

селектор1:not(селектор2) { свойства }

Давайте рассмотрим несколько примеров форматирования элементов с использованием псевдокласса :not.

Форматирование статей, которые не содержат определенный класс

Для всех статей, которые не имеют класса tag-images, зададим цвет фона, чтобы было заметней.

article:not(.tag-images) {
background-color: #b3d5f7;
}

article:not(.tag-images) {

background-color: #b3d5f7;

}

Выделение цветом в этом случае выполняется для всех статей, кроме тех, которые так или иначе посвящены теме изображений. В примере это статьи по CSS и JavaScript — они выделены голубым фоном. Посмотрим, как это работает:

Псевдокласс :not и мультиклассы

Для страниц в CMS WordPress характерно назначение большого количества классов для элемента body. Например, так:

<body>

<body>

Для того чтобы отформатировать страницы, не содержащие всего текста статей, можно написать такой селектор:

body:not(. home):not(.single):not(.single-post) {
width: 90%;
}

body:not(.home):not(.single):not(.single-post) {

width: 90%;

}

Изменяем цвет всех элементов списка, кроме первого

Например, для того чтобы задать цвет для всех элементов списка, кроме первого, необязательно добавлять для него класс. Достаточно использовать псевдокласс :not в таком виде:

.testlist li:not(:first-child) {
color: green;
}

.testlist li:not(:first-child) {

color: green;

}

Результат выглядит так, как и планировалось:

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6

Форматируем ячейки таблицы

Примерно такой же вариант форматирования, как для списка, можно использовать для двух столбцов таблицы:

td:not(:nth-child(2)):not(:nth-child(3)){
text-align: center;
background-color: #cde;
}

td:not(:nth-child(2)):not(:nth-child(3)){

text-align: center;

background-color: #cde;

}

В этом случае текст с выравниванием по центру и светло-голубым фоном будут иметь все колонки, кроме второй и третьей.

Наименование	Цвет	Артикул	Цена, грн.
Стол пластиковый Curver Elise	бежевый	17180054bj	1 200
Стол пластиковый Curver Lisa бежевый	коричневый	17180053bj	792
Стул пластиковый Allibert Montreal	серый	17197675s	1 224
Стул пластиковый Keter Harmony armchair	серо-коричневый	17201284br	1 800

Псевдокласс :not для форматирования полей формы

Допустим, у нас есть форма, в которой созданы несколько текстовых полей (<input type="text">, <input type="email"> и <input type="password">), а также поля типа number (<input type="number">). Только для текстовых полей нам нужно добавить закругления границы и тень, а также ширину и внутренние отступы. Можно это сделать, перечислив типы нужных полей или исключив ненужные с помощью псевдокласса :not:

input:not([type=»number»]){
padding: 10px;
width: 290px;
border-radius: 6px;
box-shadow: 0 0 6px #9ecbf8;
}

input:not([type=»number»]){

padding: 10px;

width: 290px;

border-radius: 6px;

box-shadow: 0 0 6px #9ecbf8;

}

Посмотрим на примере:

CSS-селектор :not. Полезные примеры

В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора.

Например:

p:not(.classy) { color: red; }

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

Пример 1. Элемент без класса

Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

ul li {  }

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li.

Мы ограничиваем область действия селектора:

.content ul li {  }

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content, где тоже используются ul li.

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

.textlist li {  }

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li, у которых нет никаких классов вообще:

ul:not([class]) li {  }

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

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

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.


ul:hover li {
  opacity:0.5;
}
ul:hover li:hover {
  opacity:1;
}

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


ul:hover li:not(:hover) {
  opacity:0.5;
}

Пример 3. Меню с разделителями между элементами

Пример

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

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY».

.menu-item:after {
  content: ' | ';
}
.menu-item:last-child:after {
  content: none;
}

Через :nth-last-child(). Одно правило, но тяжело читается.

.menu-item:nth-last-child(n+2):after {
  content: ' | ';
}

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child)

30 CSS-селекторов, о которых полезно помнить

Главная

Материалы

30 CSS-селекторов, о которых полезно помнить

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Назад
Вперед

30 CSS-селекторов, о которых полезно помнить

Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

Несмотря на то, что многие из упомянутых здесь селекторов входят в спецификацию CSS3 и, соответственно, поддерживаются только современными браузерами, Вам все же следует ознакомиться с ними и держать их в памяти.

1. *


* {
 margin: 0;
 padding: 0;
}

Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта.

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

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

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

* IE6+

* Firefox

* Chrome

* Safari

* Opera

2. #X

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

Символ решетки позволяет нам отбирать элементы по идентификатору. Это один из наиболее распространенных способов отбора элементов, однако будьте осторожны при его использовании.

«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

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

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

* IE6+

* Firefox

* Chrome

* Safari

* Opera

3. .X


.error {
  color: red;
}

Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.

В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.

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

* IE6+

* Firefox

* Chrome

* Safari

* Opera

4. X Y


li a {
  text-decoration: none;
}

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

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

«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

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

* IE6+

* Firefox

* Chrome

* Safari

* Opera

5. X

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

Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.

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

* IE6+

* Firefox

* Chrome

* Safari

* Opera

6. X:visited и X:link


a:link {color: red;}
a:visited {color: purple;}

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

7. X + Y


ul + p {
   color: red;
}

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

8. X > Y


#container > ul {
  border: 1px solid black;
}

Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:


<div>
      <ul>
         <li>Элемент списка
           <ul>
              <li>Потомок</li>
           </ul>
         </li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
      </ul>
</div>

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

9. X ~ Y


ul ~ p {
   color: red;
}

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

10. X[title]


a[title] {
   color: green;
}

Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

11. X[href=»foo»]

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

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

12. (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

14. X[href$=».jpg»]

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

И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

15. X[data-*=»foo»]

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

Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:

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

Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.

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

Поступив таким образом, мы можем использовать код данного примера:

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

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

16. X[foo~=»bar»]

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

Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.


<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>

Используя данный прием мы можем делать выборки с нужными нам комбинациями:


/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
   color: red;
}

/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
  border: 1px solid black;
}

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

* IE7+

* Firefox

* Chrome

* Safari

* Opera

17. X:checked

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

Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

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

* IE9+

* Firefox

* Chrome

* Safari

* Opera

18. X:after

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


.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

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

* IE8+

* Firefox

* Chrome

* Safari

* Opera

19. X:hover


div:hover {
  background: #e3e3e3;
}

Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

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

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

«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

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

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

* Firefox

* Chrome

* Safari

* Opera

20. X:not(selector)

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

Отрицание может быть также очень полезным. Предположим, я хочу выбрать все блоки div, кроме одного с идентификатором container. Для этого отлично подойдет код выше.

Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

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

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

* IE9+

* Firefox

* Chrome

* Safari

* Opera

21. X::pseudoElement

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

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

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

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

Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».

Выбираем первую строку параграфа:

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

Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

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

* IE6+

* Firefox

* Chrome

* Safari

* Opera

22. X:nth-child(n)

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

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

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

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

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

* IE9+

* Firefox

* Chrome

* Safari

23. X:nth-last-child(n)

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

Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.

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

* IE9+

* Firefox 3.5+

* Chrome

* Safari

* Opera

24. X:nth-of-type(n)

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

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

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

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

* IE9+

* Firefox 3.5+

* Chrome

* Safari

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

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

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

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

* IE9+

* Firefox 3.5+

* Chrome

* Safari

* Opera

26. X:first-child

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

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

К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

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

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

* IE7+

* Firefox

* Chrome
* Safari

* Opera

27. X:last-child

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

В противоположность классу first-child, last-child выберет последний элемент родительского элемента.

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

* IE9+

* Firefox

* Chrome

* Safari

* Opera

28. X:only-child

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

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

В нашем примере стиль будет применен только к параграфу, который является единственным потомком блока div.

Давайте рассмотрим для наглядности такую разметку:


<div><p>Здесь идет единственный в блоке параграф.</p></div>

<div>
   <p>Здесь идет первый параграф в блоке.</p>
   <p>Здесь идет второй параграф в блоке.</p>
</div>

В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.

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

* IE9+

* Firefox

* Chrome

* Safari

* Opera

29. X:only-of-type

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

Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.

Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ — использовать only-of-type.

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

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

* IE9+

* Firefox 3.5+

* Chrome

* Safari

* Opera

30. X:first-of-type

Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.

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

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

Сейчас, не читая дальше, попробуйте придать стиль только «элементу 2». Когда догадаетесь (либо сдадитесь), читайте дальше.

Решение 1

Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:

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

Данный код гласит: «Найди первый неупорядоченный список на странице, затем найди только его прямых потомков, являющихся элементами li. После этого выбери только второй по порядку элемент li.»

Решение 2

Другой вариант — воспользоваться смежным селектором:

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

Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.

Решение 3

Можно еще немного поиграть с селекторами и поступить таким образом:

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

Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.

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

* IE9+

* Firefox 3.5+

* Chrome

* Safari

* Opera

Вывод

Если Вы все еще пишете код, принимая во внимание существование IE6, то Вам нужно быть предельно осторожным при использовании новых селекторов. Но не делайте из этого оправдания, не говорите, что Вам это не нужно знать — этим Вы осложните жизнь самому себе.

Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать «родные» CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать быстрее.

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

По материалам www.net.tutsplus.com

Перевод — Дмитрий Науменко.

P.S. Уже верстаете сайты или планируете глубже освоить CSS? Посмотрите еще серию бесплатных видео по резиновой верстке и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?

Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх

Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам)

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

22.04.2013

Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

p {color: red}
div span {background: green}
ul li {list-style: none}

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div>текст в первом диве</div>
<div>текст во втором диве</div>
<div>текст в третьем диве</div>

На что стоит обратить внимание:

Классы и идентификаторы можно присваивать любым (всем) тегам.
Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (. ).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div>текст в диве</div>

То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

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

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div>текст</div>

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

 div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

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

div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */

Универсальный селектор

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

* {margin: 0; padding: 0;}

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

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

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

Естественно можно комбинировать селекторы как захотим, например:

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет зелёным, убираем подчёркивание */

Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Смежные селекторы

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

<style>
div + p {background: green; color: white;} /* Применить свойства к тегу p, если сразу после закрывающегося тега div открывается тег p */
p + span {background: orange;} /* не сработает, так как у нас нет открывающегося тега span, сразу после закрывающегося тега p */
</style>
<div>
  <p>текст в параграфе первого div</p>
</div>
<p>текст в параграфе ВНЕ div</p>
<div>
  <p>текст в параграфе второго div</p>
</div>
<span>текст в спане</span>
<p>снова параграф вне div</p>

Результат:

Обобщённые смежные селекторы

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

<style>
div~p{color: green;}
</style>

<div>текст в диве</div>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>

<div>
<p>параграф в диве</p>
<p>параграф в диве</p>
</div>

<span>текст в спане</span>
<p>параграф</p>

Результат:

Селекторы атрибутов

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

p[align] {свойства} /* применить ко всем тегам p, у которых есть атрибут align */

p[align="center"] {свойства} /* где значение атрибута align равно center */

p[align^="center"] {свойства} /* где значение атрибута align начинается на center */

p[align*="center"] {свойства} /* где значение атрибута align содержит center */

p[class~="site"] {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p></p>) */

p[class|="site"] {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p></p> или <p></p>) */

p[class$="site"] {свойства} /* где значение атрибута align заканчивается на site */

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

<style>
div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p.  */

div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */

div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */
</style>

<div>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

<style>
p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */
</style>

<p>параграф с классом roll</p>

<p>параграф</p>
<p>параграф</p>

<p>параграф с классом roll</p>

Результат:

Управление полями, формами, переключателями и флажками в CSS

:enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

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

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

:before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

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

Пожалуйста, оцените эту статью

Средняя оценка: 4. 87 из 5 (проголосовало: 298)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

Спасибо!

: nth-child () — Веб-технология для разработчиков

Псевдокласс CSS : nth-child () сопоставляет элементы на основе их положения в группе братьев и сестер.

 / * Выбирает второй элемент  в списке * /
li: nth-child (2) {
  цвет: салатовый;
}

/ * Выбирает каждый четвертый элемент
   среди любой группы братьев и сестер * /
: nth-child (4n) {
  цвет: салатовый;
}

Синтаксис

: nth-child () принимает единственный аргумент, который описывает шаблон для сопоставления индексов элементов в списке братьев и сестер.Индексы элементов начинаются с 1.

Значения ключевых слов

нечет: Представляет элементы, числовая позиция которых в серии братьев и сестер нечетная: 1, 3, 5 и т. Д.
четные: Представляет элементы, числовая позиция которых в серии братьев и сестер четная: 2, 4, 6 и т. Д.

Функциональное обозначение

: Представляет элементы в списке, индексы которых соответствуют найденным в пользовательском шаблоне чисел, определяемом An + B , где:
A — целочисленный размер шага,
B — целочисленное смещение,
n — все положительные целые числа, начиная с 0.; Его можно читать как An + B -й элемент списка.

Формальный синтаксис

: nth-child ( [of ]?) , где 
   =  | даже | odd 
  =  #  
  где 
   =  [? ] *  
  где 
   = [?  * [  *] *]! 
  = '>' | '+' | '~' | ['||' ]  
 , где 
  <выбор-типа> = <имя-wq> | ? '*' 
  =  |  |  |  
  = ':'  
  = ':'  | ':' <маркер-функции> <любое-значение> ')'  
  где 
   = ?  
  = [ | '*']? | 
  =  
  = '. '| '$' | '*']? '=' 
 <модификатор-атрибута> = i | с

Примеры

Примеры селекторов

tr: nth-child (нечетное) или tr: nth-child (2n + 1): Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. Д.
tr: nth-child (even) или tr: nth-child (2n): Представляет четные строки таблицы HTML: 2, 4, 6 и т. Д.
: nth-ребенок (7): Представляет седьмой элемент.
: nth-ребенок (5n): Представляет элементы 5 [= 5 × 1], 10 [= 5 × 2], 15 [= 5 × 3], и т. Д. Первый элемент, возвращаемый в результате формулы: 0 [= 5×0], что приводит к несовпадению, поскольку элементы индексируются с 1, тогда как n начинается с 0. Сначала это может показаться странным, но имеет смысл, когда часть B формула > 0 , как в следующем примере.
: n-й ребенок (n + 7): Представляет седьмой и все следующие элементы: 7 [= 0 + 7], 8 [= 1 + 7], 9 [= 2 + 7], и т. Д.
: nth-ребенок (3n + 4): Представляет элементы 4 [= (3 × 0) +4], 7 [= (3 × 1) +4], 10 [= (3 × 2) +4], 13 [= (3 × 3) +4], и т. Д.
: nth-ребенок (-n + 3): Представляет первые три элемента.[= -0 + 3, -1 + 3, -2 + 3]
p: nth-child (n): Представляет каждый
элемент в группе братьев и сестер. Это выбирает те же элементы, что и простой селектор p (хотя и с более высокой специфичностью).
p: nth-child (1) или p: nth-child (0n + 1): Представляет каждые
, которые являются первым элементом в группе братьев и сестер. Это то же самое, что и селектор : first-child (и имеет такую же специфичность).

p: nth-child (n + 8): nth-child (-n + 15): Представляет
элементов с восьмого по пятнадцатый из группы братьев и сестер.

Подробный пример

HTML

   span: nth-child (2n + 1) , БЕЗ
    & lt; em & gt;  среди дочерних элементов. 
 Выбраны дочерние элементы 1, 3, 5 и 7. 

   Промежуток 1! 
   Диапазон 2 
   Диапазон 3! 
   Диапазон 4 
   Диапазон 5! 
   Диапазон 6 
   Диапазон 7! 





  span: nth-child (2n + 1) , С
    & lt; em & gt;  среди дочерних элементов.
 Выбираются дочерние элементы 1, 5 и 7. 

   3 используется при подсчете, потому что это ребенок, но это не
   выбрано, потому что это не  & lt; span & gt; . 

   Span! 
   Диапазон 
   Это ʻem`. 
   Диапазон 
   Span! 
   Диапазон 
   Span! 
   Диапазон 





  span: nth-of-type (2n + 1) , С
    & lt; em & gt;  среди дочерних элементов.
 Выбираются дочерние элементы 1, 4, 6 и 8. 

   3 не используется при подсчете или выбирается, потому что это  & lt; em & gt; ,
   не  & lt; span & gt; , а  nth-of-type  выбирает только
   дети этого типа.  & lt; em & gt;  полностью пропускается
   поверх и проигнорирован. 

   Span! 
   Диапазон 
   Это ʻem`.
   Span! 
   Диапазон 
   Span! 
   Диапазон 
   Span!

CSS

 html {
  семейство шрифтов: без засечек;
}

пролет
div em {
  отступ: 5 пикселей;
  граница: сплошной зеленый 1px;
  дисплей: встроенный блок;
  нижнее поле: 3 пикселя;
}

.first span: nth-child (2n + 1),
. второй диапазон: n-й ребенок (2n + 1),
.third span: nth-of-type (2n + 1) {
  цвет фона: салатовый;
}

Результат

Технические характеристики

Совместимость с браузером

Обновить данные о совместимости на GitHub

Chrome для Android 9024

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android 9024 Chrome для Android 9024 Chrome	Opera для Android	Safari на iOS	Samsung Internet
`: nth-child ()`	Chrome Полная поддержка 1	Кромка Полная поддержка 12	Firefox Полная поддержка 3.5	IE Полная поддержка 9	Опера Полная поддержка 9,5 Полная поддержка 9.5 Примечания До Opera 15 Opera не обрабатывала динамически вставляемые элементы для `: nth-child ()` .	Safari Полная поддержка 3.1	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Опера Android Полная поддержка 10,1 Полная поддержка 10.1 Примечания До Opera 15 Opera не обрабатывала динамически вставляемые элементы для `: nth-child ()` .	Safari iOS Полная поддержка 3.1	Samsung Интернет Android Полная поддержка 1.0
Соответствует элементам без родительского элемента	Хром Полная поддержка 57	Кромка Полная поддержка 79	Firefox Полная поддержка 52	IE Никакой поддержки №	Opera Полная поддержка 44	Safari Никакой поддержки №	WebView Android Полная поддержка 57	Chrome Android Полная поддержка 57	Firefox Android Полная поддержка 52	Опера Android Полная поддержка 43	Safari iOS Никакой поддержки №	Samsung Internet Android Полная поддержка 7.0
`из` синтаксис	Chrome Никакой поддержки № Никакой поддержки № Примечания См. Ошибку 304163.	Край Никакой поддержки № Никакой поддержки № Примечания См. Ошибку 304163.	Firefox Никакой поддержки № Никакой поддержки № Примечания См. Ошибку 854148.	IE Никакой поддержки №	Opera Никакой поддержки №	Safari Полная поддержка 9	WebView Android Никакой поддержки №	Chrome Android Никакой поддержки №	Firefox Android Никакой поддержки № Никакой поддержки № Примечания См. Ошибку 854148.	Опера Android Никакой поддержки №	Safari iOS Полная поддержка 9	Samsung Internet Android Никакой поддержки №

Обозначение

Полная поддержка: Полная поддержка
Никакой поддержки: Нет поддержки
См. Примечания по реализации.: См. Примечания по реализации.

См. Также

Минутку …

Пожалуйста, включите куки и перезагрузите страницу.

Это автоматический процесс. Ваш браузер в ближайшее время перенаправит вас на запрошенный контент.

Подождите до 5 секунд…

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) — []) + (! + [] — (!! [])) + (! + [] + (!! []) +! ! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [])) / + ( (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + [] ) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + ( !! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + ( ! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — ( !! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! [] ) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (+! ! [])) / + ((! + [] + (!! []) — [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] +! ! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! [] ) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + ( + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + []) + (! + [] + (!! []) + !! [ ] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] +! ! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + ( + !! []) + (+ !! []) + (! + [] + (!! []) — []))

+ ((! + [] + (!! []) +! ! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) — [ ]) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! [ ]) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [ ] + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] +! ! [] + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [ ] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] +! ! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] — (!! [])) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) +! ! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (! ! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] +! ! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! [] + []) + (! + [] + (!! []) — []) + (! + [] — (!! [])) + (! + [] + (! ! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [ ] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [ ] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) — []) + (+! ! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [ ] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + ( ! + [] + (!! []) + !! [] + !! []) + (+ !! [])) / + ((! + [] + (!! []) + !! [ ] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) +! ! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! [] ) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (!

Css: селектор первого дочернего элемента — первый дочерний элемент

Css : псевдокласс first-child применяется к элементу, если он является первым родственником во всех прямых дочерних элементах своего родителя.Вот несколько примеров.

: положительный пример первого ребенка

Несколько замечаний:

Здесь стиль псевдокласса: first-child применяется ко всем прямым дочерним элементам p div класса foo.
Чтобы применить стиль ко всем прямым дочерним и дочерним элементам p, мы могли бы использовать .foo p: первый ребенок . См. Дополнительную информацию в разделе «Прямой потомок CSS против любого селектора потомков».

: отрицательный пример первого ребенка

Здесь нет первого дочернего элемента p. Так что цвет фона не будет установлен.

: first-child — включить вложенные дочерние элементы, пример

Этот пример содержит два элемента p, которые удовлетворяют требованиям первого ребенка.

 

   p1 
   p2 
  in_div_p1
in_div_p2
 
   p3

: first-child — исключить вложенные дочерние элементы, пример

Этот пример содержит два элемента p, которые удовлетворяют требованиям первого ребенка. Но поскольку мы используем .foo> p , только прямые дочерние элементы p подходят для этого стиля.

 

   p1 
   p2 
   p3 
  in_div_p1
in_div_p2

Спецификация

: первенец — Công nghệ lập trình Web

Bản dịch này chưa hoàn thành.Xin Hãy giúp dịch bài viết này từ tiếng Anh

: first-child Псевдо-класс CSS đại diện cho phần tử đầu tiên trong số các phần tử anh chị em của nó.

 / * Chn thẻ  đầu tiên trong số các thẻ anh chị em của nó * /
p: first-child {
  цвет: салатовый;
}

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

Cú pháp

: первенец

Ví dụ

Ví dụ đơn giản

HTML

 
   Этот текст выделен! 
   Этот текст не выделен.



   Этот текст не выделен: это не `p`. 
   Этот текст не выбран.

CSS

 p: first-child {
  цвет: салатовый;
  цвет фона: черный;
  отступ: 5 пикселей;
}

Kết quả

Styling một danh sách

HTML

 
   Пункт 1 
   Пункт 2 
   Пункт 3
    
       Пункт 3.1 
       Пункт 3.2 
       Пункт 3.3

CSS

 ul li {
  цвет синий;
}

ul li: first-child {
  красный цвет;
  font-weight: жирный;
}

Результат

Технические характеристики

Kh năng tương thích của trình duyệt

Обновить данные о совместимости на GitHub

Chrome для Android 9024

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android 9024 Chrome для Android 9024 Chrome	Opera для Android	Safari на iOS	Samsung Internet
`: первый ребенок`	Chrome Полная поддержка 4	Кромка Полная поддержка 12	Firefox Полная поддержка 3	IE Полная поддержка 7 Полная поддержка 7 Примечания Internet Explorer 7 не обновляет стили `: первый ребенок` , когда элементы добавляются динамически. Примечания В Internet Explorer 8, если элемент вставляется динамически путем щелчка по ссылке, то стиль `: first-child` не применяется, пока ссылка не теряет фокус.	Opera Полная поддержка 9,5	Safari Полная поддержка 3.1	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Опера Android Полная поддержка 10.1	Safari iOS Полная поддержка 4	Samsung Internet Android Полная поддержка 1.0
Соответствует элементам без родительского элемента	Хром Полная поддержка 57	Кромка Полная поддержка 79	Firefox Полная поддержка 52	IE Никакой поддержки №	Opera Полная поддержка 44	Safari Никакой поддержки №	WebView Android Полная поддержка 57	Chrome Android Полная поддержка 57	Firefox Android Полная поддержка 52	Опера Android Полная поддержка 43	Safari iOS Никакой поддержки №	Samsung Internet Android Полная поддержка 7.0

Легенда

Полная поддержка: Полная поддержка
Никакой поддержки: Нет поддержки
См. Примечания по реализации.: См. Примечания по реализации.

Xem thêm

CSS: четные и нечетные правила

CSS: четные и нечетные правила

См. Также указатель всех подсказок.

Правила четных и нечетных чисел

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

tr: nth-child (даже) {background: #CCC}
tr: nth-child (нечетный) {background: #FFF}

Месяц	’94	’95	’96	’97	’98	’99	’00	’01	’02
янв.	14	13	14	13	14	11	11	11	11
фев	13	15	12	15	15	12	14	13	13
мар.	16	15	14	17	16	15	14	15	15
апр.	17	16	17	17	17	15	15	16	16
май	21	20	20	21	22	20	21	20	19
июн.	24	23	25	24	25	23	25	23	24
июл.	29	28	26	26	27	26	25	26	25
авг.	29	28	27	28	28	27	26	28	26
сен	24	23	23	26	24	24	24	22	21
окт.	20	22	20	22	20	19	20	22
ноя	18	17	16	17	16	15	14	15
декабрь	15	13	13	14	13	10	13	11

Фактически, CSS позволяет не только разрешать четные / нечетные чередования, но и
произвольные интервалы.Ключевые слова «четный» и «нечетный» просто
удобные сокращения. Например, для длинного списка вы можете сделать
этот:

 li: nth-child (5n + 3) {font-weight: bold}

Это означает, что каждый 5-й элемент списка выделен жирным шрифтом, начиная с
3-й. Другими словами, элементы с номерами 3, 8, 13, 18, 23 и т. Д.,
будет жирным.

Четные и нечетные столбцы

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

<таблица>
 
  месяц  '94  '95  '96 ...

(COL можно использовать не только для стиля, но в этом случае
все, что нам нужно, это наличие элементов COL.) Следующие
правила придают желтому фону первый столбец, а затем каждый
второй столбец, начиная с столбца 3, серый:

col: first-child {background: # FF0}
col: nth-child (2n + 3) {background: #CCC}

Месяц	’94	’95	’96	’97	’98	’99	’00	’01	’02
янв.	14	13	14	13	14	11	11	11	11
фев	13	15	12	15	15	12	14	13	13
мар.	16	15	14	17	16	15	14	15	15
апр.	17	16	17	17	17	15	15	16	16
май	21	20	20	21	22	20	21	20	19
июн.	24	23	25	24	25	23	25	23	24
июл.	29	28	26	26	27	26	25	26	25
авг.	29	28	27	28	28	27	26	28	26
сен	24	23	23	26	24	24	24	22	21
окт.	20	22	20	22	20	19	20	22
ноя	18	17	16	17	16	15	14	15
декабрь	15	13	13	14	13	10	13	11

Фон строк (TR) рисуется перед фоном
столбцов (COL), поэтому, если вы хотите быть уверены, что фон
столбцы видны, вы не должны устанавливать фон на
ряды.

CSS 选择器 |菜鸟教程

CSS 选择器用于选择你想要的元素的样式的模式。

«CSS» 列表示在 CSS 本定义（CSS1 ， CSS2 ，或对 CSS3）。

选择器	示例	示例说明	CSS
. класс	.intro	选择所有 class = «intro» 的元素	1
# id	# имя	选择所有 id = «firstname» 的元素	1
*	*	选择所有元素	2
элемент	п.	选择所有元素	1
элемент, элемент	div, p	选择所有元素和元素	1
элемент элемент	div p	选择元素内的所有元素	1
элемент > элемент	div> p	选择所有父级是元素的元素	2
элемент + элемент	div + p	选择所有紧接着元素之后的元素	2
[ атрибут ]	[цель]	选择所有带有 target 属性元素	2
[ атрибут = значение ]	[target = -blank]	选择所有使用 target = «- blank» 的元素	2
[ атрибут ~ = значение ]	[название ~ = цветок]	选择标题属性包含单词 «цветок» 的所有元素	2
[ атрибут \| = язык ]	[lang \| = en]	选择 lang 属性以 en 为开头的所有元素	2
: ссылка	а: ссылка	选择所有未访问链接	1
: посетил	a: посетил	选择所有访问过的链接	1
: активный	a: активный	选择活动链接	1
: парение	a: парение	选择鼠标在链接上面时	1
: фокус	ввод: фокус	选择具有焦点的输入元素	2
: первая буква	p: первая буква	选择每一个元素的第一个字母	1
: первая линия	р: первая строка	选择每一个元素的第一行	1
: первенец	р: первенец	只有当元素是其父级的第一个子级的样式。	2
: до	р: перед	在每个元素之前插入内容	2
: после	р: после	在每个元素之后插入内容	2
: язык ( язык )	p: lang (it)	选择一个 lang 属性的起始值 = «it» 的所有元素	2
элемент1 ~ элемент2	пол	选择 p 元素之后的每一个 ul 元素	3
[ атрибут ^ = значение ]	a [src ^ = «https»]	每一个 src 属性的值以 «https» 开头的元素	3
[ атрибут $ = значение ]	а [src $ = «.pdf «]	每一个 src 属性的值以 «.pdf» 结尾的元素	3
[ атрибут * = значение ]	a [src * = «runoob»]	一个 src 属性的值包含子字符串 «runoob» 的元素	3
: первый в своем роде	п: первоклассный	选择每个 p 元素是其父级的第一个 p 元素	3
: последний тип	п: последний тип	选择每个 p 元素是其父级的最后一个 p 元素	3
: только тип	p: только тип	选择每个 p 元素是其父级的唯一 p 元素	3
: единственный ребенок	p: only-child	选择每个 p 元素是其父级的唯一子元素	3
: nth-ребенок ( n )	p: nth-child (2)	选择每个 p 元素是其父级的第二个子元素	3
: nth-последний-ребенок ( n )	p: nth-last-child (2)	每个 p 元素的是其父级的第二个子元素，从最后一个子计数	3
: nth-of-type ( n )	p: nth-of-type (2)	选择每个 p 元素是其父级的第二个 p 元素	3
: nth-last-of-type ( n )	p: nth-last-of-type (2)	每个 p 元素的是其父级的第二个 p 元素，从最后一个子项计数	3
: последний ребенок	p: последний ребенок	选择每个 p 元素是其父级的最后一个子级。	3
: корень	: корень	选择文档的根元素	3
: пусто	р: пусто	选择每个没有任何子级的 p 元素（包括文本节点）	3
: цель	# новости: target	当前活动的 #news 元素（包含该锚名称的点击的 URL）	3
: включено	вход: включен	选择每一个已启用的输入元素	3
: отключено	вход: отключен	选择每一个禁用的输入元素	3
: проверен	ввод: проверено	选择每个选中的输入元素	3
: нет ( селектор )	: нет (p)	选择每个并非 p 元素的元素	3
:: выбор	:: выбор	匹配元素中被用户选中或处于高亮的部分	3
: вне допустимого диапазона	: вне допустимого диапазона	匹配值在指定区间的 input 元素	3
: в пределах	: в пределах диапазона	值在指定区间之内的 input 元素	3
: чтение-запись	: чтение-запись	用于匹配可读及可写的元素	3
: только чтение	: только для чтения	用于匹配设置 «только для чтения» （只读）属性的元素	3
: дополнительно	: необязательно	用于匹配可选的输入元素	3
: требуется	: требуется	用于匹配设置了 «required» 属性的元素	3
: действует	: действует	用于匹配输入值为合法的元素	3
: недопустимый	: недопустимый	用于匹配输入值为非法的元素	3

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

First child css not: css — not:first-child selector — Stack Overflow

Псевдокласс :only-child | CSS | WebReference

Синтаксис

Обозначения

Примечание

Спецификация

Браузеры

Автор и редакторы

Псевдо-класс :first-child — первый элемент

Поддержка браузерами

Описание

Пример:

Результат данного примера:

Добро пожаловать!

Псевдокласс :not в CSS. Примеры использования

Форматирование статей, которые не содержат определенный класс

Псевдокласс :not и мультиклассы

Изменяем цвет всех элементов списка, кроме первого

Форматируем ячейки таблицы

Псевдокласс :not для форматирования полей формы

CSS-селектор :not.<img src='/800/600/https/art341fall17.files.wordpress.com/2017/10/screen-shot-2017-10-15-at-5-58-24-pm.png' /> Полезные примеры

Пример 1. Элемент без класса

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример 3. Меню с разделителями между элементами

30 CSS-селекторов, о которых полезно помнить

30 CSS-селекторов, о которых полезно помнить

Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам)

Селекторы class и id

Как обратиться к классу или id в файле стилей (CSS)?

В чём различие class и id?

Родственный селектор

Универсальный селектор

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

Динамические псевдо-классы

Смежные селекторы

Обобщённые смежные селекторы

Селекторы атрибутов

CSS 3 псевдо-классы

Управление полями, формами, переключателями и флажками в CSS

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

Преимущества оптимизации HTML за счёт CSS

Пожалуйста, оцените эту статью

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

: nth-child () — Веб-технология для разработчиков

Синтаксис

Значения ключевых слов

Функциональное обозначение

Формальный синтаксис

Примеры

Примеры селекторов

Подробный пример

HTML

span: nth-child (2n + 1) , БЕЗ & lt; em & gt; среди дочерних элементов.

span: nth-child (2n + 1) , С & lt; em & gt; среди дочерних элементов.

span: nth-of-type (2n + 1) , С & lt; em & gt; среди дочерних элементов.

CSS

Результат

Технические характеристики

Совместимость с браузером

Обозначение

См. Также

Минутку …

Css: селектор первого дочернего элемента — первый дочерний элемент

: положительный пример первого ребенка

: отрицательный пример первого ребенка

: first-child — включить вложенные дочерние элементы, пример

: first-child — исключить вложенные дочерние элементы, пример

Спецификация

: первенец — Công nghệ lập trình Web

Cú pháp

Ví dụ

Ví dụ đơn giản

HTML

Этот текст не выделен: это не `p`.

CSS

Kết quả

Styling một danh sách

HTML

CSS

CSS-селектор :not. Полезные примеры

`span: nth-child (2n + 1)` , БЕЗ `& lt; em & gt;` среди дочерних элементов.

`span: nth-child (2n + 1)` , С `& lt; em & gt;` среди дочерних элементов.

`span: nth-of-type (2n + 1)` , С `& lt; em & gt;` среди дочерних элементов.

CSS 选择器 |菜鸟教程