CSS スタイルのヒント: よく使用されるセレクターとユニバーサル セレクター_html/css_WEB-ITnose

効果的で適切に構造化されたドキュメントは、適用したいスタイルのフレームワークを提供します。 CSS を使用して特定の HTML 要素にスタイルを適用するには、CSS でその要素を検索する方法を見つける必要があります。このタスクを実行するスタイル ルールの部分はセレクターと呼ばれます。

◇ 一般的に使用されるセレクター:

最も一般的に使用されるセレクター タイプは、タイプ セレクターと子孫セレクターで、特定のタイプを検索するために使用されます。段落要素や見出し要素などの要素では、スタイルを適用する要素の名前を指定するだけです。タイプ セレクターは、要素セレクターまたは単純セレクターと呼ばれることもあります。

子孫セレクターは、特定の要素または要素のグループの子孫を検索するために使用できます。子孫セレクターは、他の 2 つのセレクター間のスペースによって表されます。この例では、ブロック引用符の子孫である段落要素のみがインデントされ、他の段落はすべて影響を受けません。

これら 2 つのセレクターは、幅広い用途を持つ一般的なスタイルを適用するのに適しています。より具体的な要素を検索するには、ID セレクターとクラス セレクターを使用します。名前が示すように、これら 2 つのセレクターは、指定された ID またはクラス名を持つ要素を検索するために使用されます。 ID セレクターは # 文字で表され、クラス セレクターはピリオドで表されます。以下の例の最初のルールは、導入段落のテキストを太字にし、2 番目のルールは日付を緑色に表示します:

前述したように、多くの CSS 開発者はクラス セレクターとディッシュ セレクターに依存しすぎています。メイン コンテンツ領域の見出しをある方法でスタイル設定し、2 番目のコンテンツ領域で別の方法でスタイルを設定したい場合は、2 つのクラスを作成し、それぞれの見出しに 1 つのクラスを適用することになるでしょう。より簡単な方法は、type と子孫の組み合わせを使用することです。 、D およびクラス セレクター:

これは非常にシンプルで明確な例です。ただし、驚かれるかもしれませんが、前に説明した 4 つのセレクターのみを使用して、多くの要素を正常に検索できることです。ドキュメントに不要なクラスを多数追加していることに気付いた場合、これはドキュメントが適切に構造化されていないことを示す警告サインである可能性があります。この時点で、これらの要素間の違いを分析する必要があります。多くの場合、唯一の違いはページ上のどこに表示されるかだけであることがわかります。これらの要素に異なるクラスを割り当てる代わりに、クラスまたは ID をその祖先に適用し、子孫セレクターを使用してそれらをターゲットにします。

疑似クラス:

場合によっては、フォーム要素のステータスやドキュメント構造の外部の他の条件に基づいて要素にスタイルを適用する必要があります。リンク。これは、疑似クラス セレクターを使用して行われます。

:link および :visited はリンク疑似クラスと呼ばれ、アンカー要素にのみ適用できます。 :hover :active および :focus は動的疑似クラスと呼ばれ、理論的には任意の要素に適用できます。ほとんどのブラウザはこの機能をサポートしていますが、IE6 はアンカー リンクに適用される :active および :hover セレクターのみに注意を払い、 :focus を完全に無視します。 IE7 は任意の要素で :hover をサポートしますが、:active と :focus は無視します。

最後に、疑似クラスを接続することで、訪問済みリンクと未訪問リンクでの異なるマウスオーバー効果など、より複雑な動作を作成できることを指摘しておきます。

◇ ユニバーサル セレクター

ユニバーサル セレクターは、おそらく最も一般的なセレクターです。強力ですが、あまり使用されていません。ユニバーサル セレクターはワイルドカードのように機能し、使用可能なすべての要素と一致します。他の言語のワイルドカードと同様に、ユニバーサル セレクターはアスタリスクで表されます。ユニバーサル セレクターは通常、ページ上のすべての要素にスタイルを適用するために使用されます。たとえば、各要素のデフォルトのブラウザ パディングとマージンは、次のルールを使用して削除できます。

他のセレクターと組み合わせて使用​​すると、ユニバーサル セレクターを使用して適用できます。要素のすべての子孫にスタイルを適用するか、子孫の 1 レベルをスキップします。これについては、この記事の後半で実際に見ていきます。