CSS異なるカラーのforeachアコーディオンのタイトル

Question

私はブートストラップアコーディオンを使用していると私はDOM 4までの要素内の要素のそれぞれは、前の色を繰り返すh4タイトルの色を変更したいと思います。

.my-platform-title:nth-child(2n+1) { 
 
    color: #1a9e49; 
 
} 
 
.my-platform-title:nth-child(2n) { 
 
    color: #7bc9c8 !important; 
 
} 
 
.my-platform-title:nth-child(3n) { 
 
    color: #fd8d6e !important; 
 
} 
 
.my-platform-title:nth-child(4n) { 
 
    color: #bf6da6 !important; 
 
}

<div class="panel-heading my-panel-heading" role="tab" id="platform1"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse1" aria-expanded="false" aria-controls="platform-collapse1"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 1 
 
     </a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading my-panel-heading" role="tab" id="platform<2"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse<2" aria-expanded="false" aria-controls="platform-collapse<2"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 2 
 
     </a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading my-panel-heading" role="tab" id="platform3"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse3" aria-expanded="false" aria-controls="platform-collapse3"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 3 
 
     </a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading my-panel-heading" role="tab" id="platform4"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse4" aria-expanded="false" aria-controls="platform-collapse4"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 4 
 
     </a> 
 
    </h4> 
 
</div>

何が起こっている最初の色が適用され、その他は無視されていることです。私はこのような各ヘッダーに異なる追加クラスを定義するために、その後、個別のクラスのスタイルを提案し

Answer 1

：すべての

<h4 class="panel-title my-panel-title my-platform-title my-platform-title-1">Title 1</h4> 
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-2">Title 2</h4> 
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-3">Title 3</h4> 
<h4 class="panel-title my-panel-title my-platform-title my-platform-title-4">Title 4</h4> 

Answer 2

まず、あなたのセレクタは間違っています。私は彼らがこのまさにあなたに仕えることを意味しますが、一般に2n+1はすべての奇妙な子供を意味し、3nは3番目の子供を意味します。代わりに

あなたはプレーンなシンプルな数字を書く必要があります：n番目の子は、（1） - 、最初の子を選択...この場合は

どんな理由であれ、働いて、そしてあなただけ変更することを考慮されていませんそれはwoulよう

.color-green { 
 
    color: #1a9e49; 
 
} 
 

 
.color-turquoise { 
 
    color: #7bc9c8 !important; 
 
} 
 

 
.color-orange { 
 
    color: #fd8d6e !important; 
 
} 
 

 
.color-purple { 
 
    color: #bf6da6 !important; 
 
}

<h4 class="panel-title my-panel-title my-platform-title color-green">Title 1</h4> 
 
<h4 class="panel-title my-panel-title my-platform-title color-turquoise">Title 2</h4> 
 
<h4 class="panel-title my-panel-title my-platform-title color-orange">Title 3</h4> 
 
<h4 class="panel-title my-panel-title my-platform-title color-purple">Title 4</h4>

Answer 3

nth-child要素セレクターである：これは次のように色が、私は、あなたが色のカスタムクラスを追加し、より友好的かつ明確なアプローチを使用することをお勧めあなたのケースでは、h4.my-platform-titleは常にdivの最初の子です。

あなたがする必要があるのは、nth-childを親divに移動することです（親の唯一の子である場合 - 下の例では、見出しの周りにコンテナを追加しました）。

あなたはまた、私はあなたがリンクの色ではなく、タイトル自身のスタイルをしたいと思いアンカーではなく、H4

.panel-heading:nth-child(1n) .my-platform-title a { 
 
    color: #1a9e49; 
 
} 
 
.panel-heading:nth-child(2n) .my-platform-title a { 
 
    color: #7bc9c8; 
 
} 
 
.panel-heading:nth-child(3n) .my-platform-title a { 
 
    color: #fd8d6e; 
 
} 
 
.panel-heading:nth-child(4n) .my-platform-title a { 
 
    color: #bf6da6; 
 
}

<div class="container"> 
 
    <div class="panel-heading my-panel-heading" role="tab" id="platform1"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse1" aria-expanded="false" aria-controls="platform-collapse1"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 1 
 
     </a> 
 
    </h4> 
 
    </div> 
 
    <div class="panel-heading my-panel-heading" role="tab" id="platform2"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse2" aria-expanded="false" aria-controls="platform-collapse2"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 2 
 
     </a> 
 
    </h4> 
 
    </div> 
 
    <div class="panel-heading my-panel-heading" role="tab" id="platform3"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse3" aria-expanded="false" aria-controls="platform-collapse3"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 3 
 
     </a> 
 
    </h4> 
 
    </div> 
 
    <div class="panel-heading my-panel-heading" role="tab" id="platform4"> 
 
    <h4 class="panel-title my-panel-title my-platform-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#platforms" href="#platform-collapse4" aria-expanded="false" aria-controls="platform-collapse4"> 
 
      <span class="fa fa-plus-square-o text-success"></span> Platform 4 
 
     </a> 
 
    </h4> 
 
    </div> 
 
</div>

Answer 4

を着色する必要があります。

.my-panel-heading:nth-child(1) a { 
    color: #1a9e49; 
} 
.my-panel-heading:nth-child(2) a { 
    color: #7bc9c8; 
} 
.my-panel-heading:nth-child(3) a { 
    color: #fd8d6e; 
} 
.my-panel-heading:nth-child(4) a { 
    color: #bf6da6; 
} 

フィドル：https://jsfiddle.net/4jc7vr9r/1/