<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>
.sample01>:first-child>:not(:first-child) { color:red; }
サンプル(2)の内容:最初のdiv(緑のボーダー)直下に2つある子要素div(黄色のボーダー)の最初のもの、その直下に3つあるul要素の最後のもの、その中に4つあるli要素のうち、最初では無く、最後でも無いもの(2番目と3番目)の文字色を赤にします。
<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>
.sample02>:first-child>:last-child>:not(:first-child):not(:last-child) { color:red; }