カスケード スタイル シート (CSS) 101 シリーズの前の部分では、要素に対する複数のルールを処理する方法について説明しました。この記事では、もう 1 つの重要な CSS 機能であるセレクターについて説明します。セレクターは、Web ページのスタイルを設定するためにページ内の要素を選択するために使用できます。
セレクターの種類
CSS スタイルには、要素の選択を実装するさまざまな方法があります。さまざまな選択方法には、ユニバーサル セレクター、タイプ セレクター、クラス セレクター、ID セレクター、祖先セレクター、子孫セレクター、隣接兄弟セレクター、属性セレクターによる選択が含まれます。
ここでは、これらのメソッドを個別に見ていきます (隣接する兄弟と属性は除きます。これについては来週説明します)。注: CSS セレクターのブラウザー サポートには一貫性がありませんが、オンラインの手順を使用して、特定のセレクターがターゲット ブラウザーで動作するかどうかを確認できます。
ユニバーサル
ユニバーサル セレクターを使用すると、ページ全体でスタイルを使用できます。基本的に、スタイルは特定の要素やクラスなどを指定しないため、ページ上のすべての要素に適用されます。色やフォントなどを設定するのに便利です。
ユニバーサル セレクターはページ上のすべての要素に使用できますが、特定のセレクターによってオーバーライドされる場合があります。 CSS 仕様では、アスタリスク (*) を使用してユニバーサル セレクターを表すことができると規定されています。リスト A は、ユニバーサル セレクターを使用してページの背景とデフォルトのフォントを設定する方法を示しています。
タイプ
要素をスタイル設定する最も一般的な方法の 1 つは、その型を使用することです。これは、特定の要素が独自に定義されたスタイルを持ち、ページ上の要素の位置に関係なく、そのタイプのすべての要素にこのスタイルを使用できることを意味します。リスト B の例は、タイプ セレクターを使用してページ上のすべてのセグメント要素のスタイルを設定する方法を示しています。
このタイプのセレクターでは、リーフ内のすべての段落要素 (より具体的なセレクターによってオーバーライドされない限り) に特定のマージンと赤いテキストが設定されます。ページ上の特定の要素のスタイル設定を処理する独自の CSS クラスを作成することもできるようになりました。
親切
クラス セレクターを使用すると、スタイルの対象範囲を決定する際に、タイプ セレクターよりも詳細な制御が可能になります。クラス セレクターによって定義されたスタイルは、ページ上の要素の位置に関係なく、クラス属性を持つすべての要素に適用できます。どの要素がスタイルを受け取るかを適切に制御できます。リスト C の例は、クラスを使用してページ内の最初の段落のみをフォーマットする方法を示しています。したがって、最初の段落のフォントはギザギザになっており、その後の段落は異なります。
クラス セレクターは、Heading、p、h1 などの HTML 予約要素を使用できません。スペースで区切ることにより、同じ要素に複数のクラスを使用することもできます。リスト D は、複数のクラスを使用して特定の段落をスタイル設定する方法を示しています。
クラス セレクターとタイプ セレクターを組み合わせて、クラスが割り当てられた特定の要素のスタイルを設定できます。このシナリオでは、スタイルを定義するときに、要素名にスペースで区切られたクラス名が含まれます。リスト E の例は、特定のクラス名が与えられたセグメント要素のみを一方の方法でスタイル設定し、同じクラス名を持つヘッダーは別の方法でスタイル設定する手法を示しています。要素の ID 属性を使用する場合は、さらに詳しく説明します。