個々のh2タグの背景色

Question

ここではちょっとしたことは疑いありません。私が作ったワイヤーフレームを作りました。行： "文字通りの作品"は、背景を持っている必要があります。しかし、どのようにh2タグをすべてスタイリングせずに、その背景を作るのですか？私が理解しているように、h2タグにクラスを与えるのは良い習慣ではありませんか？

HTML

<section class="container-fluid" id="section1"> 
     <div class="v-center"> 
      <h1 class="text-center">COMPANY NAME</h1> 
      <h2 class="text-center">Change this <b>subline</b> here</h2> 
      <p class="text-center"> 
       <br> 
       <a href="#" class="btn btn-blue btn-lg btn-huge lato" data-toggle="modal" data-target="#myModal">Get Free Membership</a> 
      </p> 
      <h2 class="text-center">A CATCY PEICE OF TEXT</h2> 


      <p class="text-center"><i>Enter your email for more news</i></p> 
     </div> 
    </section> 

Answer 1

IDを使用したり、独自のクラスは、それと間違って何も問題ありません。しかし、クラスを参照せずにあなたの質問に答えるには、あなたのDOM要素の階層を使用する必要があります。このような方法の1つは、次のようになります。

section > div > p + h2 {...} 

ザ・セクションの子であるdiv要素の子である段落の隣接兄弟であるH2要素を選択すると言います。

詳細についてはMDN section on CSS combinatorsをご覧ください。