CSS入門 | CSSセレクター | セレクター

セレクター

CSSでは、スタイルを適用する対象を選択するためにセレクターを使用する。

代表的なセレクターは次のとおりである。

• 全体セレクター
• HTML要素セレクター
• IDセレクター
• classセレクター
• groupセレクター

全体セレクター

CSSを適用する対象として、HTML文書内部のすべての要素を選択する。

<style>
    * { color: red; }
</style>

HTML要素セレクター

CSSを適用する対象として、HTML要素の名前を直接使って選択できる。

<style>
    h2 { color: teal; text-decoration: underline; }
</style>
...
<h2>この部分にスタイルを適用します。</h2>

IDセレクター

IDセレクターは、CSSを適用する対象として特定の要素を選択するときに使用する。 このセレクターは、Webページに含まれる複数の要素の中から、特定のID名を持つ要素だけを選択する。

<style>
    #heading { color: sandybrown; text-decoration: line-through; }
</style>
...
<h2 id="heading">この部分にスタイルを適用します。</h2>

HTMLとCSSでは、1つのWebページに属する複数の要素に同じID名を使っても、見た目上は問題なく動作することがある。 しかし、このように重複したIDでJavaScript処理を行うとエラーが発生する。 したがって、できれば1つのWebページに属する要素には異なるID名を使うか、classを使うのがよい。

classセレクター

classセレクターは、特定グループの複数の要素を一度に選択するときに使用する。 この特定グループをclassと呼び、同じclass名を持つ要素をすべて選択する。

<style>
    .headings { color: deepskyblue; text-decoration: overline; }
</style>
...
<h2 class="headings">この部分にスタイルを適用します。</h2>
<p>classセレクターを使うと、スタイルを適用するHTML要素を一度に選択できます。</p>
<h3 class="headings">この部分にも同じスタイルを適用します。</h3>

groupセレクター

groupセレクターは、上で説明した複数のセレクターを一緒に使いたいときに使用する。 groupセレクターは、複数のセレクターをカンマ(,)で区切って連結する。 このgroupセレクターは、コードの重複を避けてコードを簡潔にする。

<style>
    h2 { color: navy; }
    h2, h3 { text-align: center; }
    h2, h3, p { background-color: lightgray; }
</style>

CSS3セレクター Level 3

CSS3では、さまざまな機能を持つ多くのセレクターが新しく定義された。