Освоение селекторов CSS и CSS3 в 2022 году.

Экономьте время на поиск селекторов CSS.

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

Необходимые условия

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

• Базовое понимание HTML.
• Visual studio code или любая другая IDE по нашему выбору для написания кода.

Селекторы CSS

Селекторы CSS — это открывающая часть набора правил CSS. Селекторы CSS используются для выделения определенных элементов на веб-странице.

Селекторы CSS чувствительны к регистру. Они должны точно соответствовать именам элементов и значениям атрибутов.
Например,
селектор класса .logo — это не то же самое, что .LOGO.

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

Синтаксис селектора CSS следующий:

selector {
   CSS-property: value;
}

Типы селекторов CSS

• Основные селекторы
• Комбинированные селекторы
• Селектор атрибутов
• Селектор псевдоэлементов
• Селектор псевдоклассов

Базовые селекторы CSS

Базовые селекторы CSS являются наиболее распространенным типом селекторов CSS. Они определяют стиль определенных элементов на сайте. В базовых селекторах есть такие селекторы, как:

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

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

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

Символ звездочки (*) обозначает универсальные селекторы.

Синтаксис универсального селектора следующий:

* {
  CSS-Property: value;
}

Пример универсального селектора:

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

В приведенном выше ⬆️ примере мы отменяем стилизацию по умолчанию, применяемую браузерами.

Селектор типов элементов

Селекторы типов являются наиболее распространенными базовыми селекторами CSS. Они выбирают элементы HTML на основе имени элемента.

Селектор типа Element выбирает все экземпляры тега или элемента на странице.

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

element {
   property: value;
}

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

p {
  text-align: center;
  font-size: 20px; 
}

В приведенном выше ⬆️ примере все элементы абзаца <p> будут выровнены по центру и иметь размер шрифта 20px.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Селектор классов

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

Чтобы выбрать элементы с определенным классом, напишите символ точки (.), а затем имя класса.

Синтаксис селектора классов следующий:

.class-name {
  property: value;
}

Пример селектора классов:

В примере ниже ⬇️ элемент <p> имеет class=»text».

  <p class="text">Text goes here....</p>

Чтобы выбрать элемент <p> с помощью селектора классов CSS, мы:

.text {
  text-align: center;
  font-size: 20px; 
  color: skyblue;
}

Все элементы HTML с class=»text» будут выровнены по центру, иметь синий цвет текста и размер шрифта 20px.

А вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Селектор идентификаторов

Атрибуты ID специфичны только для одного элемента. Селектор ID идентифицирует элемент на основе его атрибута ID.

Чтобы выбрать элемент с определенным ID, напишите символ хэша (#), а затем ID элемента.

Этот селектор является самым мощным с точки зрения специфичности CSS.

Синтаксис селектора ID следующий:

#id-name {
  property: value;
}

Пример селектора ID:

В примере ниже ⬇️ элемент <p> имеет id=»tagline».

<p id="tagline">Tagline goes here....</p>

Чтобы выбрать элемент <p> с помощью селектора ID, мы:

#tagline {
  text-align: center;
  font-size: 25px;
  font-style: italic; 
  color: red;
  letter-spacing: 2px;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу HTML с id=»tagline».

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

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

Комбинированные селекторы CSS

Комбинированные селекторы выбирают элементы на основе определенных отношений между ними. В комбинированных селекторах есть такие селекторы, как:

Селектор потомков

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

В качестве разделителя между элементами используется пробел.

Синтаксис селектора потомков следующий:

selector1 selector2 {
  property: value;
}

Пример Descendant Selector:

В примере ниже ⬇️ элемент <div> имеет несколько вложенных элементов <p>.

<div>
<p>Paragraph 1</p>
<p>
    <p>Paragraph 2.1</p>
    <p>Paragraph 2.2</p>
</p>
<p>Paragraph 3</p>
</div>

Чтобы выбрать все элементы <p> с помощью селектора потомков, мы используем:

div p {
  text-align: center;
  font-size: 20px;
  font-style: italic; 
  color: teal;
}

В приведенном выше примере ⬆️ правило CSS будет применяться к дочерним элементам <p> <div>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Селектор прямых дочерних элементов

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

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

Для обозначения дочернего селектора мы используем знак «больше, чем» (>).

Синтаксис селектора прямого дочернего элемента следующий:

Parent-selector > Child-selector {
  property: value;
}

Пример прямого дочернего селектора:

В примере ниже ⬇️ элемент <div> имеет несколько вложенных элементов <p>.

<div>
  <p>Paragraph 1</p>
  <span>
    <p>Paragraph 2.1</p>
    <p>Paragraph 2.2</p>
  </span>
  <p>Paragraph 3</p>
</div>

Чтобы выбрать все элементы <p> с помощью прямого дочернего селектора, мы используем:

div > p {
  text-align: center;
  font-size: 20px;
  font-style: italic; 
  color: lightgreen;
}

В приведенном выше примере ⬆️ правило CSS будет применяться только к тем элементам <p>, которые являются прямыми дочерними элементами <div>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Селектор смежных братьев и сестер

Селектор Adjacent sibling выбирает элемент непосредственно после другого определенного элемента.

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

Символ тильда (+) обозначает селекторы смежных братьев и сестер.

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

first-sibling-selector + second-sibling-selector {
  property: value;
}

Второй элемент sibling идет после первого элемента sibling и является целевым элементом. Целевой элемент — это элемент, который вы собираетесь стилизовать.

Пример селектора смежных сиблингов:

В примере ниже ⬇️ элемент <div> имеет элементы <p> и <ul>, которые состоят из нескольких элементов <li>.

<div>
  <p>Paragraph 1</p>
  <ul>
    <li>Item 1</li>
    <li class="red">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <p>Paragraph 2</p>
</div>

Чтобы выбрать <li>, который идет сразу после <li> элемента class=»red», используя общий селектор сиблингов, мы используем:

li.red + li {
  background: red;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу ltem 3.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Общий селектор братьев и сестер

General Sibling Selector выбирает все указанные элементы HTML, которые расположены после другого указанного элемента, и они должны быть дочерними элементами одного и того же родительского элемента.

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

Символ тильда (~) обозначает общие селекторы братьев и сестер.

Синтаксис для общего селектора братьев и сестер следующий:

first-sibling-selector ~ second-sibling-selector {
  property: value;
}

Второй сиблинговый элемент идет после первого сиблингового элемента и является целевым элементом. Целевой элемент — это элемент, который вы собираетесь стилизовать.

Пример общего селектора братьев и сестер:

В примере ниже ⬇️ элемент <div> имеет элементы <p> и <ul>, которые состоят из нескольких элементов <li>.

<div>
  <p>Paragraph 1</p>
  <ul>
    <li>Item 1</li>
    <li class="red">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <p>Paragraph 2</p>
</div>

Чтобы выбрать все <li>, которые идут после <li> элемента class=»red», используя общий селектор сиблингов, мы используем:

li.red ~ li {
  background: red;
}

В приведенном выше примере ⬆️ правило CSS будет применяться только к элементам 3 и 4.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Селектор Or

Селектор Or позволяет нам выбрать сразу несколько элементов с разными селекторами и стилизовать их. Для этого они группируются в список, разделенный запятыми, и CSS выбирает все подходящие элементы в списке.

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

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

Синтаксис для селектора Or следующий:

selector1, selector2, ... {
  property: value;
}

Пример селектора Or:

Предположим, нам нужно применить border-radius к .btn-primary и .btn-secondary.

Вместо того, чтобы сделать это:

.btn-primary{ 
  border-radius : 3px;  
}
.btn-secondary{
  border-radius : 3px;
}

Используйте селектор Or :

.btn-primary, .btn-secondary {
  border-radius : 3px;
}

В примере выше ⬆️ правило CSS будет применяться к обоим элементам <button>, имеющим класс «btn-primary» и «btn-secondary».

Однако вот как это будет выглядеть на веб-странице:

Просмотр оригинального кода в Codepen.

И селектор

Иногда мы хотим использовать определенные элементы для стилизации. Здесь на помощь приходит селектор.

Допустим, у нас есть элемент <p> и элемент <a>, имеющие одинаковый класс = «img», и нам нужно указать, что класс должен влиять только на элемент HTML <p>, тогда мы используем And Selector.

And Selector Выбирает элементы, которые соответствуют всем комбинациям селектора.

Пример селектора ID:

В примере ниже ⬇️ элемент <p> и <a> имеют class=»img».

<img src="./images/image.jpg" class= "img"/>
<p class="img">Description of Image....</p>
<a href="http://www.example.com/image.jpg" download class="img">Download</a>

Например, чтобы выбрать элемент с определенным классом, напишите точку (.), а затем имя класса элемента.

p.img {
  text-align: center;
  font-size: 20px;
  color: green;
}

В приведенном примере ⬆️ правило CSS будет применено к элементу <p> с class=»img».

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Атрибутивные селекторы CSS

Селекторы атрибутов выбирают все элементы, которые имеют заданный атрибут или значение атрибута. Мы включаем атрибуты в открывающий тег элемента HTML. В селекторах атрибутов есть такие селекторы, как:

Имеет атрибут

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

Синтаксис для селектора Has Attribute Selector следующий:

selector[attribute] {
  property: value;
}

Пример селектора атрибутов Has:

В примере ниже ⬇️ элемент <a> имеет такие атрибуты, как href и target.

<a href="#" target="_blank">Click Here</a>

Стилизация приведенного выше ⬆️ элемента HTML <a>:

a[target]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу <a>, который имеет атрибут target.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Точный атрибут

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

Символ равенства (=) представляет селекторы атрибутов Exact.

Синтаксис для селектора точных атрибутов следующий:

selector[attribute="value"] {
  property: value;
}

Пример точного селектора атрибутов:

В приведенном ниже примере ⬇️ элемент <a> имеет такие атрибуты, как href и target.

<a href="https://google.com" target="_blank">Google</a>

Стилизация приведенного выше ⬆️ элемента HTML <a>:

a[href="https://google.com"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу <a>, который имеет атрибут href=»https://google.com».

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Начинается с атрибута

Селектор «Начинается с атрибута» выбирает элементы, значение атрибута которых начинается с определенного значения.

Символ окружного ударения (^) обозначает Begins with attribute selector.

Синтаксис для Begins with Attribute Selector следующий:

selector[attribute^="value"] {
  property: value;
}

Пример Begins with Attribute Selector:

В примере ниже ⬇️ элемент <a> имеет такие атрибуты, как href и target.

<a href="https://google.com" target="_blank">Google</a>

Стилизация приведенного выше ⬆️ элемента HTML <a>:

a[href^="https://"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу <a>, у которого атрибут href начинается с «https://».

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

End With Attribute

Селектор Ends with attribute выбирает элементы, значение атрибута которых заканчивается определенным значением.

Знак доллара ($) представляет селектор Ends with attribute selector.

Синтаксис для Ends with Attribute Selector следующий:

selector[attribute$="value"] {
  property: value;
}

Пример Ends with Attribute Selector:

В приведенном ниже примере ⬇️ элемент <a> имеет такие атрибуты, как href и target.

<a href="http://www.example.com/image.jpg" download" target="_blank">Get Stunning Image</a>

Стилизация приведенного выше ⬆️ элемента HTML <a>:

a[href$=".jpg"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу <a>, у которого атрибут href заканчивается на «.jpg».

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Атрибут подстроки

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

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

Синтаксис селектора атрибутов подстроки следующий:

selector[attribute*="value"] {
  property: value;
}

Пример подстрочного селектора атрибутов:

В примере ниже ⬇️ элемент <div> имеет атрибут data-red.

  <div data-red="1234">This is Div</div>

Стилизация приведенного выше ⬆️ элемента HTML <div>:

div[data-red*="23"]{
  font-size: 20px;
  color: lightgreen;
  text-decoration: none;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу <div>, который имеет атрибут data-red, содержащий «23».

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

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

1. Текстовые псевдоэлементы

• Селектор первой буквыСелектор первой буквы применяет стиль к первой букве элемента.

Примечание : Псевдоэлемент ::first-letter работает только для блочных элементов.

Синтаксис для селектора первой буквы следующий:

selector::first-letter {
  property: value;
}

Пример селектора первой буквы:

В приведенном ниже примере ⬇️ в элементе <div> находится образец абзаца.

<div class="pseudo-element">
  <p>This is Sample Text.</p>
</div>

Стилизация приведенного выше ⬆️ элемента HTML <p>:

p::first-letter{
  font-size: 50px;
  font-weight: 900;
  padding: 0 3px;
}

В приведенном выше примере ⬆️ правило CSS будет применено к первой букве элемента <p>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор первой строки

Селектор первой строки применяет стиль к первой строке элемента.

Примечание: Псевдоэлемент ::first-line работает только для блочных элементов.

Синтаксис для селектора первой строки следующий:

selector::first-line {
  property: value;
}

Пример селектора первой строки:

В приведенном ниже примере ⬇️ в элементе <div> находится образец абзаца.

<div class="pseudo-element">
  <p>
    This is Sample Text.<br> 
    Here we are demonstrating usage of pseudo elements
  </p>
</div>

Стилизация приведенного выше ⬆️ элемента HTML <p>:

p::first-line{
  background-color: orange;
  color: black;
}

В приведенном выше примере ⬆️ правило CSS будет применено к первой строке элемента <p>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

2. Псевдоэлементы сгенерированного контента

• Селектор Before

Селектор Before добавляет содержимое перед элементом HTML.

Примечание: При использовании псевдоэлемента ::before мы должны использовать свойство content, чтобы сделать наши стили видимыми.

Синтаксис для селектора Before следующий:

selector::before {
  property: value;
}

Пример селектора Before:

В приведенном ниже примере ⬇️ в элементе <div> находится образец абзаца.

<div class="pseudo-element">
  <p> This is Sample Text.</p>
</div>

Стилизация приведенного выше ⬆️ HTML

 element:



```css
p::before{
  content: "content";
  background: red;
}

В приведенном выше примере ⬆️ правило CSS добавит содержимое с красным фоном перед

 element.

However, here is how it will look on a webpage:




View original code in [Codepen](https://codepen.io/KadlagAkash/pen/yLKowJm). 

- **After Selector**

The After Selector adds content after the HTML element. 

>  **Note** : When using the ::after pseudo-element, we must use the content property to make our styles visible.

**The syntax for After Selector is:**


```css
selector::after {
property: value;
  }

Пример селектора After:

В примере ниже ⬇️ в элементе <div> находится образец абзаца.

<div class="pseudo-element">
  <p>This is Sample Text. </p>
</div>

Стилизация приведенного выше ⬆️ элемента HTML <p>:

p::after{
  content: "content";
  background: blue;
}

В приведенном выше примере ⬆️ правило CSS добавит содержимое с синим фоном после элемента <p>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Псевдоселекторы классов

1. Псевдоселекторы состояния класса

• Селектор наведения

Селектор Hover выбирает элементы, на которые наведена мышь.

Ховер работает, когда пользователь наводит курсор на элемент, но не выбирает его.

Синтаксис для Hover Selector следующий:

selector:hover {
  property: value;
}

Пример селектора наведения:

В примере ниже ⬇️ в элементе <a> находится образец абзаца.

<p>Hover on this link: <a href="#">click</a></p>

Стилизация приведенного выше ⬆️ элемента HTML <a>:

a:hover{
  color: black;
  background: orange;
}

В примере выше ⬆️ правило CSS будет применено к элементу <a>, когда мы наведем на него курсор.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор фокуса

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

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

Синтаксис для Focus Selector следующий:

selector:focus {
  property: value;
}

Пример селектора фокуса:

В примере ниже ⬇️ есть элемент <input>.

<input type="text"  placeholder="focus/click on me I will be orange"/>

Стилизация приведенного выше ⬆️ элемента HTML <input>:

input:focus  {
  background: orange;
}

В примере выше ⬆️ правило CSS будет применено к элементу <input>, когда мы сфокусируемся на нем.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen

• Требуемый селектор

Селектор Required Selector выбирает те входы, которые являются обязательными.

Примечание: Селектор :required применяется только к элементам формы: input, select и textarea.

Синтаксис обязательного селектора следующий:

selector:required {
  property: value;
}

Пример обязательного селектора:

В примере ниже ⬇️ есть элемент <input>.

<input type="text" required placeholder="Required Field"/>

Стилизация приведенного выше ⬆️ элемента HTML <input>:

input:required {
  color: red;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу <input>, который должен быть заполнен.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор Checked

Селектор Checked выбирает отмеченные флажки/радиокнопки.

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

Синтаксис для селектора с галочкой следующий:

selector:checked {
  property: value;
}

Пример селектора Checked Selector:

В примере ниже ⬇️ есть элемент <input>.

<input type="radio" checked="checked" value="male" name="gender"/> Male<br/>
<input type="radio" value="female" name="gender"/> Female<br/>
<input type="checkbox" checked="checked" value="Bike"/> I have a bike<br/>
<input type="checkbox" value="Car"/> I have a car 

Стилизация приведенного выше ⬆️ элемента HTML <input>:

input:checked {
  height: 30px;
  width: 30px;
}

В приведенном выше примере ⬆️ правило CSS будет применяться к элементу <input>, который отмечен флажком.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• *Селектор с отключением

Селектор Disabled Selector выбирает входы, которые отключены.

Синтаксис для Disabled Selector следующий:

selector:disabled {
  property: value;
}

Пример селектора отключения:

В примере ниже ⬇️ есть элемент <input>.

<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled"   value="Disneyland">
</form>

Стилизация приведенного выше ⬆️ элемента HTML <input>:

input[type=text]:disabled {
  background: #dddddd;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу <input> с type=»text», который отключен.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

2. Псевдоселекторы позиции класса

• Селектор первого ребенка

Селектор First-Child Selector применяет стиль к первому дочернему элементу.

Синтаксис для First-Child Selector следующий:

:first-child {
  property: value;
}

Пример селектора первого ребенка:

В примере ниже ⬇️ есть элемент <li>.

<ul>
  <li>This is first child</li>
  <li>This is second child</li>
  <li>This is third child</li>
</ul>

Стилизация приведенного выше ⬆️ элемента HTML <li>:

ul li:first-child {
  color: red;
  font-weight: bold;
}

В приведенном выше примере ⬆️ правило CSS будет применено к первому элементу в группе родственных элементов <li>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор последнего ребенка

Селектор Last-Child Selector применяет стиль к последнему дочернему элементу.

Синтаксис для Last-Child Selector следующий:

:last-child {
  property: value;
}

Пример селектора Last-Child Selector:

В примере ниже ⬇️ есть элемент <li>.

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Стилизация приведенного выше ⬆️ элемента HTML <li>:

ul li:last-child {
  color: red;
  font-weight: bold;
}

В приведенном выше примере ⬆️ правило CSS будет применено к последнему элементу из группы родственных элементов <li>, т.е. к элементам 4 и 2.2.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор Nth-Child

Селектор Nth-Child Selector подбирает элементы на основе их положения среди группы братьев и сестер.

Синтаксис для Nth-Child Selector следующий:

:nth-child(expression) {
  property: value;
}

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

нечетные : Представляет элементы, числовое положение которых в ряду братьев и сестер нечетное: 1, 3, 5 и т.д.

четные : Представляет элементы, числовое положение которых в ряду братьев и сестер четное: 2, 4, 6 и т.д.

Функциональная нотация :

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

Это может быть прочитано как An+Bth элемент списка.

Пример селектора последнего ребенка:

tr:nth-child(odd) или tr:nth-child(2n+1).

Представляет нечетные строки таблицы HTML: 1, 3, 5 и т.д.

tr:nth-child(even) или tr:nth-child(2n)

Представляет четные строки HTML-таблицы: 2, 4, 6 и т.д.

В примере ниже ⬇️ присутствует элемент <li>.

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Стилизация приведенного выше ⬆️ элемента HTML <li>:

ul li:nth-child(2n+1) {
  color: red;
  font-weight: bold;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементам 1, 3, 3.1 и 3.3.

Однако вот как это будет выглядеть на веб-странице:

Просмотр оригинального кода в Codepen.

• Селектор Nth-Last-Child

Селектор Nth-Last-Child Selector подбирает элементы, основываясь на их положении среди группы братьев и сестер, считая с конца.

Синтаксис для Nth-Last-Child Selector следующий:

:nth-last-child(expression) {
  property: value;
}

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

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

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

Функциональная нотация :

<An+B> Представляет элементы, числовое положение которых в ряду братьев и сестер соответствует шаблону An+B, для каждого целого положительного или нулевого значения n. Индекс первого элемента, считая с конца, равен 1. Значения A и B должны быть <integer>.

Пример селектора последнего ребенка:

tr:nth-child(odd) или tr:nth-child(2n+1).

Представляет нечетные строки таблицы HTML: 1, 3, 5 и т.д., считая с конца.

tr:nth-child(even) или tr:nth-child(2n).

Представляет четные строки HTML-таблицы: 2, 4, 6 и т.д., считая с конца.

В примере ниже ⬇️ есть элемент <li>.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Стилизация приведенного выше ⬆️ элемента HTML <li>:

ul li:nth-last-child(2n+1) {
  color: red;
  font-weight: bold;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементам 4, 2, 4.3 и 4.1.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор Only-Child

Селектор Only-Child применяет стиль к элементу, если он является единственным элементом в родительском блоке.

Синтаксис селектора Only-Child следующий:

:only-child {
  property: value;
}

Пример селектора Only-Child:

В примере ниже ⬇️ есть элемент <li>.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 
    <ul>
      <li>Item 3.1</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Стилизация приведенного выше ⬆️ элемента HTML <li>:

ul li:only-child {
  background: red;
  color: white;
  font-weight: bold;
}

В приведенном выше примере ⬆️ правило CSS будет применено к элементу 3.1, поскольку он является единственным дочерним элементом.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор First of Type

Селектор First of Type представляет первый элемент своего типа среди группы родственных элементов.

Синтаксис селектора First of Type следующий:

:first-of-type {
  property: value;
}

Пример селектора First of Type:

В примере ниже ⬇️ есть один элемент <h2> и два элемента <p>.

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Стилизация приведенного выше ⬆️ первого абзаца:

p:first-of-type {
  color: red;
  font-style: italic;
}

В приведенном выше примере ⬆️ правило CSS будет применено к ‘Paragraph 1’, потому что он является первым в типе <p>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Посмотрите Разница между :first-child и :first-of-type

• Селектор Last of Type

Селектор Last of Type представляет последний элемент своего типа среди группы родственных элементов.

Синтаксис селектора Last of Type следующий:

:last-of-type {
  property: value;
}

Пример селектора Last of Type:

В примере ниже ⬇️ есть один элемент <h2> и два элемента <p>.

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Стилизация приведенного выше ⬆️ последнего абзаца:

p:last-of-type {
  color: blue;
  font-style: italic;
}

В приведенном выше примере ⬆️ правило CSS будет применено к ‘Paragraph 2’, поскольку он является последним в типе <p>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Nth селектора Type

Селектор Nth of the Type сопоставляет элементы, основываясь на их положении среди родственных элементов того же типа (имя тега).

Синтаксис для Nth of Type Selector следующий:

:nth-of-type(expression) {
  property: value;
}

Пример Nth of Type Selector:

В примере ниже ⬇️ есть несколько элементов <div> и <p>.

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

Стилизация приведенных выше ⬆️ абзацев:

/* Odd paragraphs */
p:nth-of-type(2n+1) {
  color: skyblue;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: orange;
}

В приведенном выше примере ⬆️ правило CSS применит небесно-голубой цвет к ‘Paragraph 1’ & ‘Paragraph 3’ и оранжевый цвет к ‘Paragraph 2’ & ‘Paragraph 4’.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

Посмотрите разницу между :nth-child и :nth-of-type

• Селектор Nth Last of Type

Селектор Nth Last of Type подбирает элементы, основываясь на их положении среди сиблингов того же типа (имени тега), считая с конца.

Синтаксис селектора Nth Last of Type следующий:

:nth-last-of-type(expression) {
  property: value;
 }

Пример Nth Last of Type Selector:

В примере ниже ⬇️ есть несколько элементов <div> и <p>.

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

Стилизация приведенных выше ⬆️ абзацев:

/* Odd paragraphs */
p:nth-last-of-type(2n+1) {
  color: skyblue;
}

/* Even paragraphs */
p:nth-last-of-type(2n) {
  color: orange;
}

В приведенном выше примере ⬆️ правило CSS применит небесно-голубой цвет к ‘Paragraph 4’ & ‘Paragraph 2’ и оранжевый цвет к ‘Paragraph 3’ & ‘Paragraph 1’.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор Only of the Type

Селектор Only of Type представляет элемент, у которого нет братьев и сестер того же типа.

Синтаксис селектора Only of Type следующий:

:only-of-type {
  property: value;
}

Пример селектора Only of Type:

В приведенном ниже примере ⬇️ в элементе <main> имеется несколько элементов.

<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>

Стилизация приведенных выше ⬆️ элементов, не имеющих родственных элементов того же типа:

main :only-of-type {
  color: red;
}

В примере выше ⬆️ правило CSS применит красный цвет к элементам <p> и <i>.

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

• Селектор Not

Селектор Not представляет элементы, которые не соответствуют списку селекторов. Поскольку он предотвращает выбор определенных элементов, его называют псевдоклассом отрицания.

Синтаксис для Only типа Not Selector следующий:

:not(<selector-list>){
  property: value;
}

Пример Not Selector:

В примере ниже ⬇️ есть два элемента <p>.

<p>I am a normal paragraph.</p>
<p class="fancy">I am so very fancy paragraph..!</p>

Стилизация приведенного выше ⬆️ элемента <p> без фантазийного класса:

.fancy {
  background: orange;
  color: black;
  text-shadow: 2px 2px 3px red;
  font-style: italic;
}

p:not(.fancy) {
  font-style: normal;
  font-weight: bold;
}

В приведенном выше примере ⬆️ правило CSS не будет применять font-weight of bold к элементу <p> с class=»fancy».

Однако вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen.

В заключение

Я надеюсь, что вы нашли это руководство и примеры кода по CSS Selectors полезными…! Если у вас есть вопросы или замечания, не стесняйтесь оставить комментарий ниже.

Если вы нашли эту статью полезной, пожалуйста, поставьте лайк и поделитесь ею 💙.

На сегодня это все! 😁 Вы дошли до конца статьи 😍

Другие ресурсы

Просмотрите некоторые из этих ресурсов для более глубокого изучения селекторов CSS:

• MDN CSS Selectors
• WDS CSS Selectors
• Псевдоэлементы CSS WDS

Хотите больше…?

Я пишу статьи о веб-разработке в своем блоге @dev.to/kadlagakash, а также размещаю материалы, связанные с разработкой, на следующих платформах:

• Twitter

• LinkedIn