В настоящий момент я прохожу некоторые курсы HTML Academy. До этого были GeekBrains, freeCodeCamp (дошел пока до React) и некоторые другие онлайн-курсы. Пока могу сказать, что FCC предлагают наиболее интересное, последовательное и продуманное введение в веб-разработку. Но что-то неизбежно забывается, какие-то вещи не заходят с первого раза. Например, узнал кое-что новое для себя по части селекторов.
Интересно, что авторы HTML Academy считают, что:
Использование селекторов по id при оформлении считается плохой практикой. Существуют редкие исключения из этого правила, например, при оживлении слайдера на чистом CSS.
Нигде раньше не встречал.
Пример кода:
<div class = "main">
<ul>
<li class="number1"><p></p></li>
<li class="number2"></li>
</ul>
</div>
Контекстные селекторы - используются для вложенных друг в друга элементов. Например:
.main li { ... } - выбирает все элементы с тегом li внутри элементов с классом main.
Соседние селекторы - используются для расположенных рядом элементов.
.number1 + .number2
Стили применятся к элементу с селектором .number2, только если сразу перед ним расположен элемент с селектором .number1.
Может быть и комбинация селекторов:
.main .number1 + .number2
Дочерние селекторы
.main > ul
Дети (first-child, nth-child) - отдельная тема.
Полезная ссылка - Хорошие и плохие CSS-практики для начинающих