Блог

Главная - Вопросы по программированию - CSS — стиль только 3-го и 5-го элемента h2

CSS — стиль только 3-го и 5-го элемента h2

#css

#css

Вопрос:

В следующей HTML-разметке я пытаюсь стилизовать только 3-й и 5-й h2. Но что бы я ни пробовал, это не работает.

     <div class="row services">
            
            <div class="col-md-6 col-lg-6 col-xl-6 ">
                <div class="service-card">
                    <h2>First h2 title</h2>
                </div>
            </div>
            
                
            <div class="col-md-6 col-lg-6 col-xl-6 ">
                <div class="service-card">
                    <h2>Second h2 title</h2>
                </div>
            </div>
            
                
            <div class="col-md-6 col-lg-6 col-xl-6 ">
                <div class="service-card">
                    <h2>Third h2 title</h2>
                </div>
            </div>
            
                
            <div class="col-md-6 col-lg-6 col-xl-6 ">
                <div class="service-card">
                    <h2>Fourth h2 title</h2>
                </div>
            </div>
            
                
            <div class="col-md-6 col-lg-6 col-xl-6 ">
                <div class="service-card">
                    <h2>Fifth h2 title</h2>
                </div>
            </div>
            
                
            <div class="col-md-6 col-lg-6 col-xl-6 ">
                <div class="service-card">
                    <h2>Sixth h2 title</h2>
                </div>
            </div>
            
  </div>

Ответ №1:

Попробуйте это

 .services div:nth-child(3) .service-card h2,
.services div:nth-child(5) .service-card h2 {
  color: #f60;
}  
 <div class="row services">

  <div class="col-md-6 col-lg-6 col-xl-6 ">
    <div class="service-card">
      <h2>First h2 title</h2>
    </div>
  </div>


  <div class="col-md-6 col-lg-6 col-xl-6 ">
    <div class="service-card">
      <h2>Second h2 title</h2>
    </div>
  </div>


  <div class="col-md-6 col-lg-6 col-xl-6 ">
    <div class="service-card">
      <h2>Third h2 title</h2>
    </div>
  </div>


  <div class="col-md-6 col-lg-6 col-xl-6 ">
    <div class="service-card">
      <h2>Fourth h2 title</h2>
    </div>
  </div>


  <div class="col-md-6 col-lg-6 col-xl-6 ">
    <div class="service-card">
      <h2>Fifth h2 title</h2>
    </div>
  </div>


  <div class="col-md-6 col-lg-6 col-xl-6 ">
    <div class="service-card">
      <h2>Sixth h2 title</h2>
    </div>
  </div>

</div>