- <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;
- }