CSS では、セレクターはスタイルを適用したいウェブページ上の HTML 要素を指定するのに使用されます。 CSS セレクターは幅広い種類があり、スタイルを適用する要素を選択するとき、きめ細かく指定できます。以下のいくつかの記事で、とても詳しく複数の種類を見ていきます。

前提条件: 基本的なコンピューターリテラシー、基本的なソフトウェアのインストール、基本的なファイル操作の知識、 HTML の基本 (HTML 入門 の学習)、CSS の働き の知識。
目的: CSS セレクターがどのように動作するか詳しく学ぶ。

基本

前の記事では一般的な CSS の文法と記述方法を詳しく説明しました。要約すると、セレクターは CSS 規則の一部分で、 CSS 宣言ブロックの前に記述されます。

さまざまな種類のセレクター

セレクターは、以下のカテゴリーに分類することができます。

  • 単純セレクター (Simple selectors): 要素の種類、 classid に基づいて、1つ以上の要素を選択します。
  • 属性セレクター (Attribute selectors): 属性または属性値に基づいて、1つ以上の要素を選択します。
  • 疑似クラス (Pseudo-classes): 特定の状態にある1つ以上の要素を選択します。例えば、マウスポインターが上に来た要素、無効化またはチェックされたチェックボックス、 DOM ツリーの親要素から見た最初の子要素などです。
  • 疑似要素 (Pseudo-elements): 要素との関連で特定の位置にある1つ以上のコンテンツの一部を選択します。例えば、各段落の最初の語や要素の前に表示される生成されたコンテンツなどがあります。
  • 結合子 (Combinators): これは、正確にはセレクターそのものではありませんが、2つ以上のセレクターを連結してもっと具体的な選択を行う便利な方法です。例えば、 div 要素の直接の子孫の段落や、見出しの直後にくる段落などを選択できます。
  • 複数セレクター (Multiple selectors): これも、独立したセレクターではありません。同じ CSS 規則に複数のセレクターをコンマで区切って記述し、そのセレクターで選択されたすべての要素に一連の宣言を適用する方法です。

セレクターの記事概要

以下の4つの記事は、セレクターについて異なる観点で説明しています。これらは情報量が多いため、分割しました。分割したことにより、威圧感を減らし、明確なポイントを与え、学習の途中で休憩できます。記事は以下の通りです。

大切な情報を見逃さないように、まずは、単純セレクターから挑戦することを強く推奨します。

 

このモジュールの文書

 

ドキュメントのタグと貢献者

このページの貢献者: thinking-capybara, mfuji09, dskmori
最終更新者: thinking-capybara,