Мои любимые вопросы о CSS с детальными ответами. Часть 1 «CSS селекторы»

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

Вопросы

В1. Каким способом я могу установить непрозрачность для элемента button, у которого есть атрибут disabled?

В2. Как я могу установить непрозрачность для элемента span, который следует прямо за элементом input?

В3. Как можно установить непрозрачность для элемента input, у которого установлен атрибут type со значением "radio".

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

<div class="some-element">some text</div>
<div class="some-element">some text</div>
<article class="some-element">some text</article>

случай 1

.some-element:first-child {
  background-color: purple;
}

случай 2

.some-element:first-of-type {
  background-color: purple;
}

В5. Что такое псевдокласс :root?

В6. Как работает псевдокласс :placeholder-shown?

В7. Изучите следующий фрагмент кода и назовите 2 способа переписать его без потери внешнего результата, чтобы в CSS осталось только одно правило

.list__item {
  margin-right: 10px;
}

.list__item:last-child {
  margin-right: 0;
}

В8. Как я могу задать CSS для элемента, в котором есть элемент, находящийся в фокусе?

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

В10. Как можно установить цвет фона для элемента button, когда URL страницы содержит хэш #somehash? Для ответа на вопрос, исследуйте следующий код.

<div class="some-parent">
  <button id="somehash" type="button">Some button</button>
</div>

Ответы

В1. Каким способом я могу установить непрозрачность для элемента button, у которого есть атрибут disabled?

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

button[disabled] {
  opacity: 0.24;
}

В2. Как я могу установить непрозрачность для элемента span, который следует прямо за элементом input?

Ответ
Нужно использовать смежный (+).

input + span {
  opacity: 0.24;
}

В3. Как можно установить непрозрачность для элемента input, у которого установлен атрибут type со значением "radio".

Ответ
Чтобы отобрать элемент с type="radio" требуется использовать селекторы атрибутов.

input[type="radio"] {
  opacity: 0.24;
}

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

<div class="some-element">some text</div>
<div class="some-element">some text</div>
<article class="some-element">some text</article>

случай 1

.some-element:first-child {
  background-color: purple;
}

случай 2

.some-element:first-of-type {
  background-color: purple;
}

Ответ
В первом случае один элемент, а во втором — 2.

В5. Что такое псевдокласс :root?

Ответ
:root — псевдокласс, которые отбирает корневой элемент в дереве документа. В случае HTML документа это элемент html. В случае SVG документа это элемент svg.

В6. Как работает псевдокласс :placeholder-shown?

Ответ
Псевдокласс :placeholder-shown срабатывает, когда у элементов input или textarea отображается placeholder. Если пользователь начинает ввод текста, то placeholder скрывается, и поэтому псевдокласс :placeholder-shown не применяется.

input:placeholder-shown {
  background-color: lightgray;
}

В7. Изучите следующий фрагмент кода и назовите 2 способа переписать его без потери внешнего результата, чтобы в CSS осталось только одно правило

.list__item {
  margin-right: 10px;
}

.list-item:last-child {
  margin-right: 0;
}

Ответ
Первый способ это заменить margin-right на the margin-left и использовать псевдокласс :nth-child.

.list__item:nth-child(n+2) {
  margin-left: 10px;
}

Второй способ это использовать псевдоклассы :not() и:last-child, чтобы задать margin-right.

.list__item:not(:last-child) {
  margin-right: 10px;
}

/* or */
.list__item:not(:first-child) {
  margin-left: 10px;
}

В8. Как я могу задать CSS для элемента, в котором есть элемент, находящийся в фокусе?

Ответ
Нужно использовать псевдокласс :focus-within.

<div class="some-parent">
  <button type="button">Some button</button>
</div>

.some-parent:focus-within {
  outline: 2px solid purple;
  outline-offset: 5px;
}

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

Ответ
Нужно использовать сложный селектор. Первая часть tbody:hover нужна, чтобы установить opacity для всех строк. Вторая часть чтобы opacity не применялось на наведенную строку, нужно использовать :not(:hover).

tbody:hover tr:not(:hover) {
  opacity: 0.24;
}

В10. Как можно установить цвет фона для элемента button, когда URL страницы содержит хэш #somehash? Для ответа на вопрос, исследуйте следующий код.

<div class="some-parent">
  <button id="somehash" type="button">Some button</button>
</div>

Ответ
Нужно использовать псевдокласс :target.

button:target {
  background-color: purple;
}

P.S: Если интересно узнать больше о селекторах и проверить свои знания на практике, то это можно сделать на моем Patreon. Также для большей информации прочитайте введение для моего Patreon.