Не понимаю поведения класса при добавлении к нему 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

Нумерованый список и под список

#html #css #ul

Есть нумерованный список который начинается с "1". Нужно сделать так чтобы под список
начинался с цифры- с которой начинается родительский элемент.


Возможно ли сделать такое средствами css без js?



.list {
    color: $color-primary;
    font-weight: 600;

    & > li {
        &:before {
            margin-right: 1.2rem;
        }

        ul {
            color: $color-minor-dark;

            li {
                &:before {
                    margin-right: 1.2rem;
                }
            }
        }
    }

    &.numeration {
        counter-reset: list decimal;

        & > li {
            list-style-type: none;

            &:before {
                counter-increment: list;
                content: counter(list) ".";
                color: $color-active;
            }

            ul {
                counter-reset: list decimal;

                & > li {
                    &:before {
                        counter-increment: lists;
                        content: counter(lists) "." counter(decimal);
                    }
                }
            }
        }
    }

    &.sm {
        font-size: 1.4rem;

        & > li {
            & + li {
                margin-top: 1.2rem;
            }

            ul {
                margin-top: 1.2rem;
                margin-left: 1.6rem;

                & > li {
                    margin-top: 1.2rem;
                    padding-left: 1.2rem;
                }
            }
        }
    }

    &.md {
        font-size: 1.6rem;

        & > li {
            & + li {
                margin-top: 1.4rem;
            }

            ul {
                margin-top: 1.4rem;
                margin-left: 1.6rem;

                & > li {
                    margin-top: 1.4rem;
                    padding-left: 1.2rem;
                }
            }
        }
    }
}

  
work status
  
annual income
  
net worth
      

          
forex market
      
  
  
position 5




    

Ответы

Ответ 1

ol {
  /* убираем стандартную нумерацию */
  list-style: none; 
  /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано – по
умолчанию оно равно 0 */ 
  counter-reset: li; 
}

li:before {
  /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает,
что содержимое, вставляемое при помощи свойства content, будет располагаться перед
пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию
равно 1). */
  counter-increment: li; 
  /* С помощью свойства content выводится номер пункта списка. counters() означает,
что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка
в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется
перед содержимым каждого пункта списка */
  content: counters(li,".") ". "; 
}

  
пункт
 
  
пункт           
    

      
пункт
 
      
пункт
 
      
пункт
        

          
пункт
 
          
пункт
 
          
пункт
  
        
      
 
      
пункт
   
    
  
 
  
пункт
         
  
пункт
         

Не понимаю поведения класса при добавлении к нему 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, хотя в свойствах его нет, тоже непонятный момент.

Ответ

ul.icons_main_class { list-style: none; background: red; } /* Потому, что ты не правильно последовательность селекторов прописываешь*/ /* ты говоришь, возьми тег ul который в каком то блоке классом icons_main_class2 */ /* и пропиши ему правила ниже, а такой последовательности селекторов нет*/ .icons_main_class2 ul { list-style: none; background: red; }

• social1

• social1

Нумерованый список и под список

Есть нумерованный список который начинается с "1". Нужно сделать так чтобы под список начинался с цифры- с которой начинается родительский элемент.
Возможно ли сделать такое средствами css без js?
.list { color: $color-primary; font-weight: 600; & > li { &:before { margin-right: 1.2rem; } ul { color: $color-minor-dark; li { &:before { margin-right: 1.2rem; } } } } &.numeration { counter-reset: list decimal; & > li { list-style-type: none; &:before { counter-increment: list; content: counter(list) "."; color: $color-active; } ul { counter-reset: list decimal; & > li { &:before { counter-increment: lists; content: counter(lists) "." counter(decimal); } } } } } &.sm { font-size: 1.4rem; & > li { & + li { margin-top: 1.2rem; } ul { margin-top: 1.2rem; margin-left: 1.6rem; & > li { margin-top: 1.2rem; padding-left: 1.2rem; } } } } &.md { font-size: 1.6rem; & > li { & + li { margin-top: 1.4rem; } ul { margin-top: 1.4rem; margin-left: 1.6rem; & > li { margin-top: 1.4rem; padding-left: 1.2rem; } } } } }

• work status
• annual income
• net worth
  • forex market
• position 5

Ответ

ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано – по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }

1. пункт
2. пункт
   1. пункт
   2. пункт
   3. пункт
      1. пункт
      2. пункт
      3. пункт
   4. пункт
3. пункт
4. пункт