コニファ・ロゴ

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

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

サンプル(1)htmlソース

<div class="sample01">
  <ul>
    <li><b>ダミーリスト1-1</b> ダミーテキストダミーテキストダミー</li>
    <li><b>ダミーリスト1-2</b> ダミーテキストダミーテキストダミー</li>
    <li><b>ダミーリスト1-3</b> ダミーテキストダミーテキストダミー</li>
    <li><b>ダミーリスト1-4</b> ダミーテキストダミーテキストダミー</li>
  </ul>
  <ul>
    <li><b>ダミーリスト2-1</b> ダミーテキストダミーテキストダミー</li>
    <li><b>ダミーリスト2-2</b> ダミーテキストダミーテキストダミー</li>
    <li><b>ダミーリスト2-3</b> ダミーテキストダミーテキストダミー</li>
    <li><b>ダミーリスト2-4</b> ダミーテキストダミーテキストダミー</li>
  </ul>				
</div>

サンプル(1)CSSソース

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

サンプル(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ソース

<div class="sample02">		
  <div class="child01">
    <ul>
      <li><b>ダミーリスト1-1</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト1-2</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト1-3</b> ダミーテキストダミーテキストダミー</li>
    </ul>
    <ul>
      <li><b>ダミーリスト2-1</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト2-2</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト2-3</b> ダミーテキストダミーテキストダミー</li>
    </ul>
    <ul>
      <li><b>ダミーリスト3-1</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト3-2</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト3-3</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト3-4</b> ダミーテキストダミーテキストダミー</li>      
      <li><b>ダミーリスト3-5</b> ダミーテキストダミーテキストダミー</li>
    </ul>
  </div>
  <div class="child02">
    <ul>
      <li><b>ダミーリスト4-1</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト4-2</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト4-3</b> ダミーテキストダミーテキストダミー</li>
      <li><b>ダミーリスト4-4</b> ダミーテキストダミーテキストダミー</li>
    </ul>
  </div>
</div>	

サンプル(2)CSSソース

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

サンプル(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 ダミーテキストダミーテキストダミーテキスト

 

 

戻るボタン