Какое вычисленное значение у свойства height у элемент .parent?

.parent::before { content: ""; position: absolute; width: 1rem; height: 1rem; }

Элемент с position: absolute выпадает из потока документа. Поэтому родительский элемент не знает о дочернем элементе. Таким образом, вычисленное значение height равно 0

Напоминаю, что ко мне можно обращаться за помощью по CSS. Может посоветоваться хотите. Или не знаете что-то. Денег сразу не прошу

Какое вычисленное значение свойства background-color у элемента p?

```
body {
--bg-color: red;
background-color: green;
}

p {
--bg-color: inherit;
background-color: var(--bg-color);
}
```

--bg-color: inherit получает значение red от --bg-color родительского элемента и переходит к background-color элемента p. Правильный ответ - red.

Определяйте только то, что вам нужно определить
Кто-то сделал так

.hero { background: \#e1bfe9; /* background\-color: \#e1bfe9; background\-image: initial background\-size: initial и оставшиеся background\-* свойства */ }

Я предлагаю делать так

.hero { background\-color: \#e1bfe9; }

Есть отличный способ написать масштабируемый CSS. Не определяйте то, что не нужно. Если вам нужно определить цвет фона, сделайте это с помощью background-color, а не с помощью background.

Напоминаю, что можно получить архив со всеми 49 постами (сегодня будет опубликован 22 пост). Плюс ранний доступ к новым.

Напишите мне @melnik909. Продам вам архив.

P.S. Могу ли я зарабатывать такими советами?

? — Да

? — Иди работай уже, код пиши

Что я советую посмотреть из моего контента:

1. HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
   Рассказываю об ошибках в верстке, которые влияют на цифровую доступность.

2. Готовимся к вопросам по вёрстке на интервью Frontend-разработчика
   Отвечаю на самые популярные вопросы о CSS на интервью фронтендера.

3. Неизвестно полезный CSS
   Делюсь малоизвестными свойствами и нюансами работы.

4. Магия CSS на практике: советы по вёрстке от гика
   Мои любые подходы и приемы при работе с CSS.

5. Чёрт тебя возьми, CSS
   Объясняю сложные и неочевидные моменты работы CSS.

6. You Should Know CSS — the list of questions to level up your CSS skill
   Мой список вопросов, позволяющий найти слабые места в знаниях.

7. Живые шпаргалки для свойств display и position
   Шпаргалки на Codepen, показывающие множество неизвестных нюансов свойств. Можно потыкать и изучить.

8. Код компонента Timeline
   Как написать CSS для компонента? На этот вопрос можно найти ответ в этой демке. Правда, придется покапаться в коде.

9. Анимашки и CSS творчество
   UI Анимации, CSS арт и готовые визуальные решения.

Незаметные проблемы от counter()

Кто-то сделал так

.section { counter\-increment: section\-counter; } .section\_\_heading::before { content: "0" counter(section\-counter) "."; color: \#3861cb; font\-size: 2rem; }

Я предлагаю делать так

```
/*

01. О нас

*/

.section__step {
color: #3861cb;
font-size: 2rem;
}
```

Внимание! Пользователи скринридера услышат цифры, которые вы добавляете с помощью counter(). Вы думаете, они полезны? Нет. Они только засоряют озвучку.

У меня подготовлено всего 49 постов. Опубликованы 20. А хотите получить оставшиеся? А еще ранний доступ к новым?

Напишите мне @melnik909. Продам вам архив. Мне же надо зарабатывать...

Как написать CSS в зависимости от количества дочерних элементов

Кто-то сделал так

.uia\-control { display: inline\-flex; gap: .5rem; /* оставшиеся CSS */ }

Я предлагаю делать так

.uia\-control { display: inline\-flex; /* оставшиеся CSS */ } .uia\-control:has(> :nth\-child(2)) { gap: .5rem; }

Мне всегда приходилось определять gap. Даже если у элемента только один дочерний элемент. Хотя...

Мы можем избежать этого с помощью :has()! Например, я сделал так, что gap применяется, если у uia-control есть минимум 2 дочерних элемента.

Вы упустили этот супер очевидный способ отобразить элементы в столбец

Кто-то сделал так

.container { display: flex; flex\-direction: column; gap: 1rem; }

Я предлагаю делать так

.container { display: grid; gap: 1rem; }

Конечно, когда нужно отобразить элементы в столбец, flex-direction сделает это. Но мне нравится более короткий вариант. Просто использовать display: grid.