По какой логике строится матрешка CSS?

Подскажите какая логика матрешки?

Изначально познакомили с классами в дивах. Они задаются через 

.class

Если в диве есть H1, то будет выглядеть как 

.class h1

Если в H1 есть A, то будет выглядеть как 

.class h1 a

Вроде бы все логично. Но тут начинается ul. Класс menu для ul почему-то задается как

ul.menu

а не как "просто"

.menu

При том, что класс "просто" .menu - используется и для тега a, и для тега p и для тега div. А вот для тега ul - задается он иначе.

При этом когда ВНУТРИ тега UL - задаются стили LI - происходит возвраст к старому обозначению:

ul.menu li

Получается, что все классы задаются одинаково для всех через .class - но вот у ul - такая странная особенность. 

-

Поясните почему тег ul так выделяется по этой методологии используется? И есть ли другие теги, которые также "иначе" прописываются в CSS? 

Или может быть есть какая-то другая логика, которая для меня на данном этапе еще не очевидна?

Вот этот ul.menu меня с толку только родившейся и понятной логики сильно сбил. А дальше в 4.17 идут уже ul.menu li.selected - что тоже говорит о том, что логику я видимо понял не до конца.

Спасибо!