要素型、クラス、ID セレクター

要素型セレクター (type selector) は、タグ名セレクターまたは要素セレクターと呼ばれることもあります。これは文書中のタグまたは要素を選択するからです。要素型セレクターは大文字小文字の区別がありません。次の例で span, em, strong セレクターを使用しています。

CSS ルールを追加して <h1> 要素を選択してその色を青に変えましょう。

全称セレクター (universal selector) はアステリスク (*) で表します。またこれは文書のすべてまたは親要素に含まれるすべての要素（これはそれが連なっている、他の要素やそれらの子要素に連なっている要素すべて）を選択します。次の例ではすべての要素からマージンを削除しています。これはブラウザーによって追加された既定のスタイルの代わりに、見出しや段落のマージンを消してそれぞれを近く配置させます。これにより個々の段落の見分けがつかなくなってしまいます。

この種類の動作はしばしば「スタイルシートのリセット」と呼び、ブラウザーのスタイル設定を取り消します。全称セレクターはグローバルな変更をもたらすため、下記に述べる特定の状況のみに使うべきです。

全称セレクターの使用方法のひとつに、セレクターを読みやすくし、その動作を明かにするのものがあります。例えば、 <article> 要素の最初の子要素を選択し、それがどんな要素であったとしてもそれを太字にしたいとします。これには :first-child セレクターを使うことができます。これはあとの擬似クラスと擬似要素のコースで詳細を学びますが、<article> 要素セレクターの後ろで指定します。

article :first-child {
  font-weight: bold;
}

しかしこれは、 article:first-child、すなわちあらゆる <article> 要素の最初の子要素を選択するものと混同しかねません。

この混同を避けるために、 :first-child 擬似クラスに全称セレクターを追加することで、セレクターが何をしているのかがより明確になります。これは <article> 要素の最初の子要素、または <article> の子孫要素の最初の子要素であるあらゆる要素を選択します。

article *:first-child {
  font-weight: bold;
}

どちらもやることは同じですが、読みやすさは格段に向上しています。

クラスセレクターの名前はピリオド (.) から始まります。そしてそのクラスが適用されている、文書内のすべてを選択します。次の例では、 highlight というクラスを作成し、文書のいくつかの場所に適用します。このクラスが適用されたすべての要素を強調します。

特定のクラスが適用された特定の要素を対象にするセレクターを作成できます。次の例では、highlight クラスの <span> を強調しますが、highlight クラスの <h1> 見出しを異なるように強調します。対象にしたい要素に要素型セレクターを使用して実現できます。ドットの後にクラスを追加しますが、クラスとの間にホワイトスペースをいれません。

このアプローチでは、ルールが特定の要素とクラスの組み合わせにのみ適用されるため、ルールの範囲が狭くなります。そのため、ルールを他の要素にも適用したい場合は、別のセレクターを追加する必要があります。

一つの要素に複数のクラスを適用できます。それらを個別に選択することも、すべてのクラスがあるものだけを選択することもできます。これは、サイト上で様々な方法で組み合わせることができるコンポーネントを構築する際に便利です。

次の例は、ノートのある <div> です。灰色の境界はそのボックスが notebox クラスもっている場合にのみ適用されます。もしそれが warning や danger クラスも持っていた場合 border-color を変更します。

ブラウザーに、2 つのクラスが存在する要素だけ一致するように指定するには、それらのクラスをすべて空白を入れずに繋げて指定します。最後の <div> は danger クラスしか持っていないため、スタイルが設定されていないことがわかるでしょう。何かを取得するには notebox も必要です。

ID セレクターは大文字と小文字を区別し、ピリオドではなく # で始まりますが、クラスセレクターと同じように使用します。ただし、 ID を使用することができるのは 1 ページにつき 1 回のみで、要素には 1 つの id 値しか示すことができません。 id が設定されている要素を選択することができ、 id の前に要素型セレクターを入力することで、要素と id の両方が一致した場合のみその要素を対象とすることができます。次の例では、この両方の使用例を見ることができます。

要素型、クラス、ID セレクターについては以上です。続いて属性セレクター によるセレクターを調べてみます。

• 前のページ
• Overview: CSS の構成要素
• 次のページ