Как выбрать первый :nth-child(1)?

Question

[Игорь]

Чо то принцип nth не до конца понял.
объясните пожалуйста в данном примере.
Нужно чтобы только "10" имел желтый цвет.
Спасибо!

welovepavel.esy.es/2

.s_tizers .row div i:nth-child(1){
    color: yellow;
}

<section class="s_tizers">
        <div class="container">
            <div class="row">                
               
               
                <div class="col-md-3">
                    <div class="tiz_img">
                   <i class="my">10</i>
               </div>
               <div class="tiz_desc">
                  <span>Более 10 лет</span> 
                  <strong>На рынке</strong>
               </div>
                </div>
                <div class="col-md-3">
                    <div class="tiz_img">
                   <i class="my my_d"> </i>
               </div>
               <div class="tiz_desc">
                  <span>самые современные</span> 
                  <strong>методики</strong>
               </div>
                </div>
                <div class="col-md-3">
                    <div class="tiz_img">
                   <i class="my my_e"> </i>
               </div>
               <div class="tiz_desc">
                  <span>квалифицированные</span> 
                  <strong>преподаватели</strong>
               </div>
                </div>
                <div class="col-md-3">
                    <div class="tiz_img">
                   <i class="my my_f"></i>
               </div>
               <div class="tiz_desc">
                  <span>гарантированное получение</span> 
                  <strong>высоких баллов</strong>
               </div>
                </div>
            </div>
        </div>
        
        
    </section>

Answer 1

[Андрей Мохов]

.s_tizers .row .col-md-3:first-child i {
    color: yellow;
}

Comments

[Игорь]

почему вы i поставили после :first-child ?

[Андрей Мохов]

Игорь: ну мы ведь собираемся для тэга i установить стиль, поэтому он последний
:first-child ищет первого потомка, а у вас все i будут первыми внутри тэга div.tiz_img, потому нужно найти первого потомка в div.row и потомку i сменить цвет

Answer 2

[bismoney]

:first-child - первый
:last-child - последний

.s_tizers .row div i:nth-child(1){
    color: yellow;
}

Тут вы указываете что у вас первый i, а он у вас в div всего один.
Вам надо указывать nth-child на div а в нем уже i с нужным параметрами

Вот так
div:nth-child(1) i

Answer 3

[whitysolo]

.s_tizers .row + div i{
color: yellow;
}

Answer 4

[Andrey Chursin]

Учите мат.часть (Дмитрий Потапенко ©)
htmlbook.ru/css/nth-of-type