結合子を使う - CSSのチュートリアル

このレッスンでは、結合子、 コンビネータとも呼ばれるんですけれども、 その使い方についてご説明をします。 結合子、コンビネーターというのは、 ふたつのセレクタつなぎます。 そして、要素間の関係に基づいて 要素を選択すると。 4つありまして、 まずは「子孫結合子」ですね。 ふたつのセレクタの間に、 ワンスペースです。 半角スペースを入れて 「Aの子孫であるBの要素」を選択します。 今度は「子結合子」ですね。 A、そして不等号が入ります。 > ですね。 そうすると、「Aの子であるBの要素」 ということになります。 「隣接兄弟結合子」というのは、 A B というふうに 表示するんですけれども、 「Aの直後の兄弟Bの要素」。 それから「一般兄弟結合子」。 これは A ~ B という形で 「Aのつぎの兄弟Bの要素」ということで、 分かったような分からないような、 という感じがするかもしれません。 これは実際に使ってみた方が 理解できると思います。 では、順番にいきましょう。 子孫結合子ですね。 孫が含まれますので、 孫を作らないといけませんから、 このでは、li要素に入れ子で ol にしましょう。 ol で li で 孫要素 というふうにします。 これにもカラーを付けましょう。 ですから、ol に対して color は blue というふうにします。 今の状態、確認しておきましょうね。 ファイルを保存して。 番号付きのリストが入れ子になって、 1. と。そして 孫要素 ですね。 そしてブルーのカラーが設定されています。 ここで子孫結合子を使います。 ul の子孫の li。 ワンスペースですね。 そして color は green にしましょう。 これで結果を見てみます。 ファイルを保存しましょう。 ul の中のli要素は、 もちろんその入れ子になったですね、 ol の中のli要素についても 緑が設定されています。 ですから、子孫なんですね。 子だけでなくて孫、 あるいは、更にひ孫まで含めます。 子孫結合子というのは、 その子供の系列になっていれば 孫もひ孫も、 その先まで全部含まれるんですね。 ul の中に入っている li要素でありさえすればいい ということになります。 それに対して、この結合子ですね。 >、こうしますと、 直接の子供、自分の直接の子供でない限り…