Не понимаю поведения класса при добавлении к нему ul

#html #css #css3 #выравнивание #ul

                    
В заголовке сформулировал вопрос.
 Пример  кода - jsfiddle



body {
  background-color: lavender;
}

.icons_main_class {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  text-align: right;
}

.icons_main_class li {
  background-image: url(https://image.flaticon.com/sprites/share/packs/174834-social-media-logos.png);
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 32px;
  height: 32px;
  background-size: 13rem;
  border-radius: 5px;
}

.social1 {
  background-position: 20% -0.3%;
}

.social2 {
  background-position: 40% 0;
}

.social3 {
  background-position: 99% 0;
}

  

  

  






Есть вот такой код, где я спрайтами попытался сделать что-то типа кнопок соц сетей
и вроде бы все работает как надо. Но вот меня мучит один вопрос (реально хочу знать
и понимать), если к классу .icons_main_class добавить ul (то есть так - .icons_main_class
ul {...}) , то почему-то перестает работать text-align. Как я понимаю и меню эта слетает
в исходное положение (left). И вот мне интересно почему, ведь мы по сути обращаемся
к классу, который содержится в том же теге ul, но если его прописать, то случается
такая фигня, расскажите пожалуйста в чем дело и почему так происходит и еще когда добавляем
этот ul то слева откуда то появляется margin, хотя в свойствах его нет, тоже непонятный
момент.
    

Ответы

Ответ 1

ul.icons_main_class {
  list-style: none;
  background: red;
}


/* Потому, что ты не правильно последовательность селекторов прописываешь*/


/* ты говоришь, возьми тег ul который в каком то блоке классом icons_main_class2 */


/* и пропиши ему  правила ниже, а такой последовательности селекторов нет*/

.icons_main_class2 ul {
  list-style: none;
  background: red;
}

  
social1



  
social1