CSS виды селекторов

Селектор	Описание
.block	по классу (можно выбрать множество элементов)
#block	по айди (можно выбрать только один элемент)
*	выберет все элементы
h2	выберет все элементы [h2]
p, span	выберет все элементы [p] и [span]
p span	выберет все [span] элементы внутри всех [p] (не важно на какой глубине вложенности)
p > span	выберет всех прямых потомков [span] всех элементов [p]
p + span	выберет первого нижнего соседа [span] возле всех элементов [p]
p ~ span	выбирает все элементы [span], которые идут после элемента [p]
[disabled]	выберает все элементы имеющие атрибут [disabled]
[type=submit]	выбирает все кнопки, которые имеют тип "submit"
[data-type~=vertical]	выбирает все элементы, у которых есть атрибут data-type, и значение его атрибута содержит слово "vertical"
[data-text|=start]	выбирает все элементы, у которых есть атрибут data-text, и значение его атрибута начинается с слова "start или start-n"
[data-text^=start]	выбирает все элементы, у которых есть атрибут data-text, и значение его атрибута начинается с слова "start"
[data-text$=".zip"]	выбирает все элементы, у которых есть атрибут data-text, и значение его атрибута заканчивается на ".zip"
[data-text*="TS"]	выбирает все элементы, у которых есть атрибут data-text, и значение его атрибута содержит подстроку "TS"
:root	позволяет выбрать корневой элемент документа, который является основой для всего остального содержимого страницы.
.block.open	выбирает все элементы на странице класса "block", у которых также есть класс "open"

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

1. Селекторы атрибутов с использованием * (например, [id*="value"])

2. Селекторы псевдоэлементов (::before, ::after, ::first-letter)

3. Селекторы дочерних элементов (например, ul > li)

4. Селекторы, которые полагаются на путь к элементу в документе (например, html body div#content ul.list li a)

5. Селекторы сочетания классов, атрибутов и псевдоклассов (например, .class[attribute]:hover)

6. Селекторы, которые ищут элементы внутри больших документов (например, :not(:last-child) внутри тысячи элементов)

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

---

.block (по классу)

.block {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div class="block">
  <h2>Заголовок блока</h2>
  <p>Текст блока</p>
</div>

Результат:

---

#block (по айди)

#block {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div id="block">
  <h2>Заголовок блока</h2>
  <p>Текст блока</p>
</div>

Результат:

---

* (все элементы)

* {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div>
  <h2>Заголовок блока</h2>
  <p>Текст блока</p>
</div>

Результат:

---

h2 (по тегу)

h2 {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div>
  <h2>Заголовок блока</h2>
  <p>Текст блока</p>
</div>

Результат:

---

p, span (несколько тегов)

p, span {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div>
  <h2>
    <span>Заголовок</span>
    <span> блока</span>
  </h2>
  <p>
    <span>Текст </span>
    <span>блока</span>
  </p>
</div>

Результат:

---

p span (выбрать все [span] элементы внутри всех [p])

p span {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div>
    <h2>
        <span>Заголовок</span>
        <span> блока</span>
    </h2>
    <p>
        <span>Текст </span>
        <span>блока 1</span>
        <i>
            <span>Текст </span>
            <span>блока 2</span>
        </i>
    </p>
</div>

Результат:

---

p > span (выбрать все [span] только внутри всех [p])

p > span {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div>
    <h2>
        <span>Заголовок</span>
        <span> блока</span>
    </h2>
    <p>
        <span>Текст </span>
        <span>блока 1</span>
        <i>
            <span>Текст </span>
            <span>блока 2</span>
        </i>
    </p>
</div>

Результат:

---

p + span (выбрать первого нижнего соседа [span] возле всех элементов [p])

p + span {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div>
    <h2>
        <span>Заголовок</span>
        <span> блока</span>
    </h2>
    <p>
        <span>Текст </span>
        <span>блока 1</span>
    </p>
    <span>Текст </span>
    <span>блока 2</span>
</div>

Результат:

---

p ~ span (выбирает все элементы [span], которые идут после элемента [p])

p ~ span {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

<div>
    <h2>
        <span>Заголовок</span>
        <span> блока</span>
    </h2>
    <p>
        <span>Текст </span>
        <span>блока 1</span>
    </p>
    <span>Текст </span>
    <span>блока 2</span>
</div>

Результат:

---

[disabled] (выберает все элементы имеющие атрибут [disabled])

[disabled] {
  border: 1px solid #FF6A00;
  padding: 3px;
}

<div>
  <button>Кнопка 1</button>
  <button disabled>Кнопка 2</button>
  <button>Кнопка 3</button>
</div>

Результат:

---

[type=submit] (выбирает все кнопки, которые имеют тип "submit")

[type=submit] {
  border: 1px solid #FF6A00;
  padding: 3px;
}

<div>
  <button type="submit">Кнопка 1</button>
  <button>Кнопка 2</button>
  <button type="submit">Кнопка 3</button>
</div>

Результат:

---

[data-type~=vertical] (выбирает все элементы, у которых есть атрибут data-type, и значение его атрибута содержит слово "vertical")

[data-type~=vertical] {
  border: 1px solid #FF6A00;
  padding: 3px;
}

<div data-type="vertical">Этот блок вертикальный</div>
<div data-type="horizontal">Этот блок горизонтальный</div>
<div data-type="horizontal and vertical">Этот блок вертикальный и горизонтальный</div>

Результат:

---

[data-text|=start] (выбирает все элементы, у которых есть атрибут data-text, и значение его атрибута начинается с слова "start")

[data-text|=start] {
  border: 1px solid #FF6A00;
  padding: 3px;
}

<p data-text="start-1">Текст 1</p>
<p data-text="start2">Текст 2</p>
<p data-text="stop and start">Текст 3</p>
<p data-text="start">Текст 4</p>

Результат:

---

[data-text^=start] (выбирает все элементы, у которых есть атрибут data-text, и значение его атрибута начинается с слова "start")

[data-text^=start] {
  border: 1px solid #FF6A00;
  padding: 3px;
}

<p data-text="start-1">Текст 1</p>
<p data-text="start2">Текст 2</p>
<p data-text="stop and start">Текст 3</p>
<p data-text="start">Текст 4</p>

Результат:

---

[data-text$=.zip] (выбирает все элементы, у которых есть атрибут data-text, и значение его атрибута заканчивается на ".zip")

[data-text$=".zip"] {
  border: 1px solid #FF6A00;
  padding: 3px;
}

<p data-text="file.txt">Текст</p>
<p data-text="file.rar">Архив 1</p>
<p data-text="file.zip">Архив 2</p>
<p data-text="zip.file">Текст 2</p>

Результат:

---

[data-text*="TS"] (выбирает все элементы, у которых есть атрибут data-text, и значение его атрибута содержит подстроку "TS")

[data-text*="TS"] {
  border: 1px solid #FF6A00;
  padding: 3px;
}

<p data-text="file.txtTS">Текст 1</p>
<p data-text="file[TS].rar">Текст 2</p>
<p data-text="TS file.zip">Текст 3</p>
<p data-text="TSzip.file">Текст 4</p>
<p data-text="zip.file">Текст 5</p>

Результат:

---

Повторим про атрибуты.

Выбирает элементы, у которых атрибут data-text:

1. [data-text="file"] — имеет значение "file" (то есть строго равен указанному значению)

2. [data-text~="file"] — содержит указанное значение в любом месте списка, разделенного пробелами (примет data-text="file", data-text="file a", data-text="a file", но не data-text="file.zip", где есть другое слово после значениия "file")

3. [data-text|="file"] — начинается с указанного значения и затем идет дефис (примет data-text="file", data-text="file-1", но не data-text="file1", где число идет после слова "file" без дефиса)

4. [data-text^="file"] — начинается с указанного значения, после могут идти любые символы (примет data-text="file", data-text="file-1", data-text="file1", но не data-text="Tfile" где символ T идёт перед "file")

5. [data-text$="file"] — заканчивается с указанного значения (примет data-text="text file", data-text="text-file", data-text="textfile", но не data-text="file text" где text идёт впереди "file")

6. [data-text*="file"] — содержит указанную подстроку (примет data-text="textfiletext", data-text="text-file", data-text="text[file]", но не data-text="text" так как отсутствует искомая подстрока "file")

---

:root (позволяет выбрать корневой элемент документа, который является основой для всего остального содержимого страницы)

Обычно :root представлен как <html>, однако в некоторых случаях, например при использовании фреймов, может быть другим элементом.

:root {
  --main-bg-color: #f8f8f8;
  --main-text-color: #333333;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

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

---

.block.open (выбирает все элементы на странице класса "block", у которых также есть класс "open")

.open{
    border: 1px solid #333;
}

.block.open{
  background-color: #fff;
  padding: 10px;
}

.block {
    background-color: #999;
}

<div class="block open">
<p>Текст 1</p>
<p>Текст 2</p>
</div>

<div class="block">
<p>Текст 3</p>
<p>Текст 4</p>
</div>

Результат:

---