В этом вопросе разберем такие темы как, в чем разница указания классов. Теги, как и где их писать и как находить. Порядок написания тегов в селекторах.

1. Разница между селекторами

.sidebar .vote.my-4 > .title { /* 1 */ }
.sidebar .vote.my-4.title { /* 2 */ }
.sidebar .vote.my-4 .title { /* 3 */ }

Первый вариант: выбирает элемент с классом title, который является прямым потомком (дочерним элементом) элемента с классами vote и my-4, который находится внутри элемента с классом sidebar.

> означает "прямой потомок".

Второй вариант: выбирает элемент, у которого одновременно есть классы vote, my-4 и title, находящийся внутри sidebar.

Здесь нет пробела между классами, значит это один элемент.

Третий вариант: выбирает элемент с классом title, который находится где-то внутри (не обязательно прямым потомком) элемента с классами vote и my-4, который в свою очередь внутри sidebar.

Просто пробел означает "где-то внутри в любом уровне вложенности".

2. Как находить элементы без классов/ID

<div class="txt">
  <textarea name="text"></textarea>
</div>

Можно выбрать textarea несколькими способами:

.txt textarea { /* по вложенности */ }
textarea[name="text"] { /* по атрибуту */ }
textarea { /* все textarea на странице */ }

3. О порядке написания тегов в селекторах

.sidebar .vote.my-4 .title div { /* div внутри .title */ }
div.sidebar .vote.my-4 .title { /* .title внутри .vote.my-4 внутри элемента, который одновременно div и .sidebar */ }

Когда тег пишется в начале (например, div.class), это означает элемент, который одновременно является div и имеет этот класс. Когда тег в конце (.class div), это означает div внутри элемента с классом.

Советы по выбору элементов:

1. Для точного выбора лучше использовать классы или атрибуты.
2. Теги лучше использовать для общих стилей (input { ... }) или когда нет других опций.
3. Инструменты разработчика в браузере (F12) помогут исследовать структуру и подобрать селекторы.
4. Чем конкретнее селектор, тем выше его приоритет (специфичность).