CSSの基本書式

基本書式

セレクタ {プロパティ: 値}
セレクタ {プロパティ: 値; プロパティ: 値; プロパティ: 値;}

セレクタのグループ化

複数のセレクタに対し同じプロパティへ同じ値を設定する場合

セレクタ1, セレクタ2, セレクタ3, ...{
　プロパティ: 値;
　プロパティ: 値;
　プロパティ: 値;
}

タイプセレクタ

スタイルシートを適用させたい要素の要素名をセレクタの名前として記述します。

子孫セレクタ

対象となる要素が特定の親要素の子要素または孫要素の場合だけ対象となるセレクタです。

親要素 子孫要素 {
プロパティ: 値;
}

子供セレクタ(>)

対象となる要素が特定の親要素の子要素の場合だけ対象となるセレクタです。
親要素と子要素を「>」で区切って記述します。この場合、子要素が指定した親要素の子要素だった場合だけが対象となります。孫要素には適用されない。

親要素 > 子要素 {
　プロパティ: 値;
}

隣接兄弟セレクタ(+)

対象となる要素が、同じ親要素の子要素で特定の要素のすぐ次に現れた場合だけ対象となるセレクタです。
隣接要素と対象要素を「+」で区切って記述します。対象の要素が隣接要素のすぐ次に現れた場合だけが対象となります。なお隣接要素と対象要素は同じ親要素の子要素である必要があります。

隣接要素 + 対象要素 {
　プロパティ: 値;
}

クラスセレクタ(.)

指定の要素の中でclass属性に特定の値が記述されている要素だけを対象となるセレクタです。
要素名とclass属性の値をドット(.)で区切って記述します。class属性の値は同じ文書内で複数の要素に同じ値を割り当てることが出来ます。

要素名.クラス名 {
プロパティ: 値;
}

IDセレクタ(#)

指定の要素の中でID属性に特定の値が記述されている要素だけを対象となるセレクタです。
要素名ID属性の値をドット(#)で区切って記述します。ID属性の値は同じ文書内でユニークである必要があります。

要素名#ID名 {
　プロパティ: 値;
}

属性セレクタ([])

クラス、ID属性以外にも要素を特定する属性を指定することが出来ます。
要素名の後に属性名を[と]の間に記述します。

要素名[属性名] {
　プロパティ: 値;
}

ユニバーサルセレクタ(*)

全ての要素を対象とする場合に使用するのがユニバーサルセレクタです。
アスタリスク(*)だけを記述します。全ての要素が対象となります。
よく使われるのが、各要素にデフォルトで設定されているマージンとパディングを0に設定する場合です。次のように記述します。

* {
　margin: 0;
　padding: 0;
}