トップページの中の CSSの基本の中の セレクタのグループ化

セレクタのグループ化

  • 最終更新:2009年6月25日 03:09

セレクタは、カンマ(,)で区切ることによってグループ化され、複数の要素に同じスタイルが適用できます。

#main table {
  margin-bottom: 1em;
}
#main ol {
  margin-bottom: 1em;
}
#main ul {
  margin-bottom: 1em;
}
#main dl {
  margin-bottom: 1em;
}
#main blockquote {
  margin-bottom: 1em;
}
#main pre {
  margin-bottom: 1em;
}
#main p {
  margin-bottom: 1em;
}

上記のようにそれぞれの要素にmargin-bottom: 1em;の指定をしていたら手間もかかりますし、コードも長くなってしまいます。
そこで、同じスタイルを複数の要素に適用させる場合、グループ化をすることで見やすくなり、効率的に書くことができます。

#main table, #main ol, #main ul, #main dl,
#main blockquote, #main pre, #main p {
  margin-bottom: 1em;
}

グループ化の場合、カンマの前後に半角スペースなどの空白類文字を使えるため見やすい位置で改行したりするといい感じです。

このページの上部へ