Вопрос на CSS собеседовании.

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

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

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

#css #собеседование

Вопрос на CSS собеседовании.

Как я могу задать 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;
}

#css #собеседование

Вопрос на CSS собеседовании.

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

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

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

#css #собеседование

Вопрос на CSS собеседовании.

У элемента button установлено значение 16px для свойства font-size. Как мне установить значение 8px для свойства padding в единицах измерения em?

Ответ:
Нужно разделить 8px на 16px.

button {
font-size: 16px;
padding: .5em;
}

#css #собеседование

Вопрос на CSS собеседовании.

Как я могу переписать следующий код так, чтобы значение свойства background-color автоматически менялось при изменении значения свойства color?

.link {
  color: #222;
}

.link::before {
  background-color: #222;
}

Ответ:
Нужно использовать ключевое слово currentColor, которое автоматически подставляет значение свойства color для текущего элемента. В нашем случае значение будет унаследовано от элемента .link.

.link {
color: #222;
}

.link::before {
background-color: currentColor;
}

#css #собеседование

Вопрос на CSS собеседовании.

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

Ответ:

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

#css #собеседование

Вопрос на CSS собеседовании.

Я установил значение 10vw для свойства padding-left. Каким будет вычисленное значение в px, если размеры вьюпорта устройства — 480x320px?

Ответ:

Единица измерения vw — это процент от ширина вьюпорта. В нашем случае 10vw соответствует 10% от ширины вьюпорта 480px, т.е. 48px.

#css #собеседование

Вопрос на CSS собеседовании.

Как рассчитывается значение свойства height у блочных элементов?

Ответ:

Значение свойства height у блочных элементов рассчитывается в зависимости от высоты содержимого этого элемента.

#css #собеседование

Вопрос на CSS собеседовании.

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

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

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

#css #собеседование