Мои любимые вопросы о 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.