Как понять зачем много имен в селекторе?

Question

[Anomaly_Phoenix]

Я не знаю, как это загуглить и как это называется, но мне интересно почему много селекторов пишут иногда перед свойствами и как с этим вообще работать. Пример:

.menu-main a.current, .menu-main a:hover{color: #feb386;}

Answer 1

[Vladislav]

https://doka.guide/css/combined-selectors/

Answer 2

[Виталий Першин]

Вот такая связка .menu-main a.current называется вложенные селекторы. Используют для того чтобы задать стили относительно родителя, в данном случае .menu-main, но на практике это в итоге приносит много боли и проблем, поэтому приучайтесь сразу писать просто класс без вложенности. На эту тему можете ознакомиться с методологией БЭМ. Чем плоха вложенность? Она повышает специфичность, чтобы переопределить стили придется тянуть эту связку повсюду, если вы просто обратитьсе к .current, то уже ничего переопределить не выйдет. Кроме того в борьбе со специфичность многие начинают повышать её еще сильнее, накидывая все больше классов и тегов, например body .page section#header ul.menu-main a.current и это ужасно.

А вот запятая между этими вложенными селекторами означает, что это комбинированные селекторы, то есть к ним будут применяться одни и те же правила. В данном примере ссылка и ссылка при наведении будут иметь один и тоже color.

Про виды селекторов можно почитать тут https://html5book.ru/osnovy-css/#part2

Answer 3

[SagePtr]

Потому что CSS не позволяет их красиво сгруппировать наподобие ".menu-main a(.current или :hover)", потому приходится разбивать это на два разных селектора: ".menu-main a.current" и ".menu-main a:hover". Так как селекторы можно перечислять через запятую, то их и перечисляют так: ".menu-main a.current, .menu-main a:hover".

.menu-main a.current, .menu-main a:hover{color: #feb386;}

аналогично двум правилам:

.menu-main a.current{color: #feb386;}
.menu-main a:hover{color: #feb386;}