どうも。どっことです。今回はCSSを追加するときによく忘れるタグ／クラス／IDの指定方法について整理しました。
タグ指定によるカスタマイズ
タグ指定によるCSSは タグ名をそのまま書きます。つまり以下です。
/* bodyタグの指定*/
body {
...
}
/* h1クラスの指定 */
h1 {
...
}
クラス指定によるカスタマイズ
クラス指定によるCSSはピリオド「.」をつけて書きます。
/* hogeクラスの指定 */
.hoge {
...
}
/* fugaクラスの指定 */
.fuga {
...
}また、タグ指定とクラス指定を組み合わせることができます。
/* hogeクラスが設定されているdivタグの指定 */
div.hoge {
...
}
/* hugaクラスが設定されているpタグの指定 */
p.fuga {
...
}ID指定によるカスタマイズ
ID指定によるCSSはシャープ「＃」をつけて書きます。
/* ID:header */
#header {
...
}
/* ID:footer */
#footer {
...
}また、ID指定も、タグ指定、クラス指定を組み合わせることができます。
/* ID:headerが指定されているdivタグ */
div#header {
...
}
/* new-articleクラス、ID:title 指定 */
.new-article#title {
...
}
/* divタグ、commentクラス、ID:title 指定 */
div.comment#title {
...
}指定のタグ／クラス／ID内の要素に対してCSSを指定できます。
/* ID:headerが指定されている要素内のaタグ指定 */
#header a {
...
}
/* new-articleクラス内の div 指定 */
.new-article div {
...
}
