今回はhtmlのDOM（階層）を利用して目的の要素を探していきたいと思います。
それではいってみましょう！
Menu
指定した子要素
親要素 > 子要素｛プロパティ｝；
クラスthreeの子のli要素に赤色の文字にする例
1 2 3 4 | /*子セレクタ */ .three>li { color: red; } |
指定した子孫要素
親要素 空白 子要素｛プロパティ｝；
クラスthreeの子孫のli要素に赤色の文字にする例
1 2 3 4 | /*子孫セレクタ */ .three li { color: red; } |
隣接した兄弟の指定要素
直前の要素 + 対象要素｛プロパティ｝；
クラスthreeの子のh3に隣接する直後のli要素に赤色の文字にする例
1 2 3 4 | /* 隣接セレクタ */ .three > h3 + li { color: red; } |
兄弟の前要素より後ろの指定要素全部
前の指定要素 ~ 後ろの指定要素｛プロパティ｝；
（後ろの指定要素は直後でなくてもOKです。）
クラスoneの子のh3より後ろのli要素全部を赤色の文字にする例
1 2 3 4 | /* 前要素から指定した後ろ要素全部 */ .one > h3 ~ li { color: red; } |
まとめ
今回は基本となる子孫兄弟セレクタの指定方法を解説してみました。
JavaScriptやJQueryを使用しなくても、CSSだけで変更できるので便利です～(^▽^)o
以上です。
