CSS セレクターのグループ化とネスト

CSS では、共通のスタイルを適用するために、複数のセレクターをグループ化したり、セレクターをネストして詳細な指定を行うことができます。

グループ化

グループ化は、複数のセレクターに共通のスタイルを適用する場合に役立ちます。

カンマ（,）を使用してセレクターを区切ることで、複数のセレクターに同じスタイルを適用できます。

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  color: blue;
}

この例では、h1、h2、h3 セレクターに同じフォントファミリーとテキスト色が適用されます。

ネスト

ネストは、特定の親要素内の子要素にスタイルを適用する場合に役立ちます。

親セレクターと子セレクターをスペースで区切ることで、子要素に対してスタイルを適用できます。

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
}

この例では、nav 要素内の ul 要素に list-style を none に設定し、nav 要素内の li 要素に display を inline に設定します。

さらなるネスト

ネストは、さらに深い階層の要素に対しても適用できます。親、子、孫セレクターなど、さらに詳細な指定が可能です。

.main-content p strong {
  color: red;
}

この例では、.main-content クラスを持つ要素内の p 要素内の strong 要素にテキスト色を赤に設定します。

ネストを使用することで、コードの可読性と保守性が向上します。

ただし、ネストが深くなりすぎると、コードが複雑になるため、適切なレベルのネストを維持することが重要です。