コニファ・ロゴ

csstest:CSS3 first-child疑似クラス、:not()擬似クラスなどを組み合わせて、やや複雑な要素選択

CSS3の「:first-child疑似クラス」、「:last-child疑似クラス」、「:not()擬似クラス」を組み合わせて、やや複雑な要素選択をします。 サンプル(1)の内容:div(緑のボーダー)直下にふたつあるul要素の最初の子要素、その中のliの最初の子要素以外の要素の文字色を赤にします。

サンプル(1)htmlソース

  1. <div class="sample01">
  2. <ul>
  3. <li><b>ダミーリスト1-1</b> ダミーテキストダミーテキストダミー</li>
  4. <li><b>ダミーリスト1-2</b> ダミーテキストダミーテキストダミー</li>
  5. <li><b>ダミーリスト1-3</b> ダミーテキストダミーテキストダミー</li>
  6. <li><b>ダミーリスト1-4</b> ダミーテキストダミーテキストダミー</li>
  7. </ul>
  8. <ul>
  9. <li><b>ダミーリスト2-1</b> ダミーテキストダミーテキストダミー</li>
  10. <li><b>ダミーリスト2-2</b> ダミーテキストダミーテキストダミー</li>
  11. <li><b>ダミーリスト2-3</b> ダミーテキストダミーテキストダミー</li>
  12. <li><b>ダミーリスト2-4</b> ダミーテキストダミーテキストダミー</li>
  13. </ul>
  14. </div>

サンプル(1)CSSソース

  1. .sample01>:first-child>:not(:first-child) {
  2. color:red;
  3. }

サンプル(1)

  • ダミーリスト1-1 ダミーテキストダミーテキストダミー
  • ダミーリスト1-2 ダミーテキストダミーテキストダミー
  • ダミーリスト1-3 ダミーテキストダミーテキストダミー
  • ダミーリスト1-4 ダミーテキストダミーテキストダミー
  • ダミーリスト2-1 ダミーテキストダミーテキストダミー
  • ダミーリスト2-2 ダミーテキストダミーテキストダミー
  • ダミーリスト2-3 ダミーテキストダミーテキストダミー
  • ダミーリスト2-4 ダミーテキストダミーテキストダミー

 

サンプル(2)の内容:最初のdiv(緑のボーダー)直下に2つある子要素div(黄色のボーダー)の最初のもの、その直下に3つあるul要素の最後のもの、その中に4つあるli要素のうち、最初では無く、最後でも無いもの(2番目と3番目)の文字色を赤にします。

サンプル(2)htmlソース

  1. <div class="sample02">
  2.   <div class="child01">
  3.     <ul>
  4.       <li><b>ダミーリスト1-1</b> ダミーテキストダミーテキストダミー</li>
  5.       <li><b>ダミーリスト1-2</b> ダミーテキストダミーテキストダミー</li>
  6.       <li><b>ダミーリスト1-3</b> ダミーテキストダミーテキストダミー</li>
  7.     </ul>
  8.     <ul>
  9.       <li><b>ダミーリスト2-1</b> ダミーテキストダミーテキストダミー</li>
  10.       <li><b>ダミーリスト2-2</b> ダミーテキストダミーテキストダミー</li>
  11.       <li><b>ダミーリスト2-3</b> ダミーテキストダミーテキストダミー</li>
  12.     </ul>
  13.     <ul>
  14.       <li><b>ダミーリスト3-1</b> ダミーテキストダミーテキストダミー</li>
  15.       <li><b>ダミーリスト3-2</b> ダミーテキストダミーテキストダミー</li>
  16.       <li><b>ダミーリスト3-3</b> ダミーテキストダミーテキストダミー</li>
  17.       <li><b>ダミーリスト3-4</b> ダミーテキストダミーテキストダミー</li>      
  18.       <li><b>ダミーリスト3-5</b> ダミーテキストダミーテキストダミー</li>
  19.     </ul>
  20.   </div>
  21.   <div class="child02">
  22.     <ul>
  23.       <li><b>ダミーリスト4-1</b> ダミーテキストダミーテキストダミー</li>
  24.       <li><b>ダミーリスト4-2</b> ダミーテキストダミーテキストダミー</li>
  25.       <li><b>ダミーリスト4-3</b> ダミーテキストダミーテキストダミー</li>
  26.       <li><b>ダミーリスト4-4</b> ダミーテキストダミーテキストダミー</li>
  27.     </ul>
  28.   </div>
  29. </div>

サンプル(2)CSSソース

  1. .sample02>:first-child>:last-child>:not(:first-child):not(:last-child) {
  2. color:red;
  3. }

サンプル(2)

  • ダミーリスト1-1 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト1-2 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト1-3 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト2-1 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト2-2 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト2-3 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト3-1 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト3-2 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト3-3 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト3-4 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト3-5 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト4-1 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト4-2 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト4-3 ダミーテキストダミーテキストダミーテキスト
  • ダミーリスト4-4 ダミーテキストダミーテキストダミーテキスト

 

 

戻るボタン