CSSの様々な指定方法まとめ

CSSの基本的なセレクタとプロパティの記述の仕方は、

こうですよね。複数のプロパティを指定する方法も、次のように記述するだけです。

しかし、色々な状況に応じて、もっと便利な記述をすることができるので、いくつか紹介していきたいと思います。

複数のセレクタに一度にデザインを指定

同じプロパティを複数のセレクタに指定したい場合があったとします。そのまま書いたら次のようになります。

同じプロパティを指定するのに、何度も同じ記述をするのは面倒ですよね。こんな時は、複数のセレクタを一度に指定することできます。例えば、次のように記述します。

セレクタを(,)を使って区切ることで一度に記述することが可能です。上の記述でも、下の記述でも全く同じ様に、h1、h2、h3全てに背景の色の指定が適用されます。この記述はセレクタのグループ化と呼ばれます。

子孫セレクタについて

ある要素（親要素）の中の要素を子要素と呼び、その中の要素を孫要素を呼びます。子孫要素と呼ぶ場合もあります。この子孫要素をうまく活用することで、更に違うセレクタの指定が可能です。実際の方法は次の通りです。

この様に、親要素と子孫要素を半角スペースを使って一度に記述すると、指定した親要素に含まれる子孫要素だけを指定することができます。

例えば、上の様に指定した場合、p要素の背景の色は全て#eeeeeeになります。しかし、以下の様に記述することでより詳細に要素を指定することができます。

この様に記述すると、footer（親要素）に含まれるp（子要素）のみを指定することが可能になります。footer内のpのみ背景色が変わるわけです。他にも便利なセレクタの指定方法はいろいろあるので、慣れてきたら是非活用してみましょう。