Мои любимые вопросы о CSS с ответами / Хабр

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

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

<body>
  <div class="awesome-block">я первый элемент</div>
  <div class="awesome-block">я второй элемент</div>
  <article class="awesome-block">я третийэлемент</article>
<body>

случай 1

.awesome-block:first-child {
  background-color: purple;
}

случай 2

.awesome-block:first-of-type {
  background-color: purple;
}

Ответ

Псевдоклассы :first-child и :first-of-type выбирают первый элемент из группы элементов. Только псевдокласс :first-of-type дополнительно учитывает тип элемента. Соответственно, в первом случае будет один элемент с пурпурным фоном, а во втором — 2.

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

Ответ

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

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

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

Ответ

Через псевдокласс :focus-within.

<body>
  <div class="awesome-block">
    <button type="button">Включить фокус</button>
  </div>
</body>

.awesome-block:focus-within {
  outline: 2px solid purple;
  outline-offset: 5px;
}

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

Ответ

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

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

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

.link {
  color: #222;
}

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

Ответ

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

.link {
  color: #222;
}

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

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

.button {
  font-size: 16px;
  /* padding: ?; */
}

Ответ

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

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

Как браузер расположит элементы div в следующем примере кода?

<body>
  <div>я первый элемент</div>
  <div>я второй элемент</div>
</body>

Ответ

У элементов div по умолчанию установлено значение block для свойства display. По этой причине они будут расположены друг под другом в колонку.

Рассчитанное значение для свойства width у элемента .child это 1000px. Да или нет? Почему?

<body>
  <div class="parent">
    <div class="child">Я дочерний элемент</div>
  </div>
</body>

.parent {
  width: 1000px;
}

Ответ

Да. Свойство width у элементов, у который установлено свойство display со значением block, заполняется все доступное горизонтальное пространство родительского элемента.

В нашем примере для элемента .child браузеры рассчитают значение 1000px.

Элементы с установленным свойством display и значением inline располагаются в одну строку. Правда или ложь?

Ответ

Правда.

Размеры элемента .child — 196x196px. Да или нет?

<body>
  <span class="child">element</span>
</body>

.child {
  width: 196px;
  height: 196px;
}

Ответ

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

Вычисленное значение для свойства width у элемента с классом .child это 1000px. Да или нет? Почему?

<body>
  <div class="parent">
    <div class="child">Я дочерний элемент</div>
  </div>
</body>

.parent {
  width: 1000px;
}

.child {
  position: absolute;
}

Ответ

Нет. При использов��нии свойства position со значением absolute свойство width рассчитывается в зависимости от количества содержимого элемента.

Какие размеры у элемента span в следующем примере?

span {
  width: 300px;
  height: 300px;
  display: flex;
}

Ответ

Когда к элементу применяется свойство display со значением flex, браузеры могут рассчитать значение для свойств width и height.

В нашем примере использует элемент span. По умолчанию у него установлено значение inline для свойства display. Мы его переопределили на flex. Следовательно размер элемента — 300x300px.

В следующем примере у элемента с классом .child вычисленное значение свойства display будет inline-block. Да или нет?

<body>
  <div class="parent">
    <span class="child">Я дочерний элемент</span>
  </div>
</body>

.parent {
  display: flex;
}

.child {
  display: inline-block;
}

Ответ

Нет. Внутри элемента, у которого установлено свойство display со значением flex, не может существовать элементы с строчным (inline-*) значениями для свойства display.

Браузеры автоматически трансформируют их в блочные альтернативы. Поэтому вычисленное значение — block.

.parent {
  display: flex;
}

.child {
  display: inline-block; /* здесь будет вычислено значение block */
}

Какой отступ будет между элементами в следующем примере?

<body>
  <div class="parent">
    <div class="child">Я первый дочерний элемент</div>
    <div class="child">Я второй дочерний элемент</div>
  </div>
</body>

.parent {
  display: flex;
  flex-direction: column;
}

.child:first-child {
  margin-bottom: 20px;
}

.child:last-child {
  margin-top: 10px;
}

Ответ

30px, потому что margin'ы внутри элемента с установленным свойством display со значением flex суммируются.

Какие размеры у элемента span в следующем примере?

<div class="parent">
  <span class="child">Я дочерний элемент</span>
</div>

.parent {
  display: flex;
}

.child {
  flex-basis: 250px;
  width: 100px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
}

Ответ

225px. У свойства flex-basis есть приоритет перед свойством width, но также его значение должно быть в диапазоне значений свойств min-width и max-width.

В нашем случае 250px (flex-basis) не укладывается в диапазон, и поэтому значение ширины ограничивается 225px.

P.S. У меня есть почтовая рассылка с CSS советами. Я буду рад, если вы присоединитесь. Ссылка указана в разделе "О себе" в моем профиле.