CSSセレクターチートシート

キーポイント

CSSセレクターは、CSSルールセットの重要な部分であり、HTMLドキュメントのタイプ、属性、または場所に基づいて特定のHTML要素を選択およびスタイリングできます。 CSSセレクターは、ユニバーサルセレクター、要素タイプセレクター、IDセレクター、クラスセレクター、サブセレクター、ユニバーサル兄弟セレクター、隣接する兄弟セレクター、属性セレクター、擬似クラスセレクター、および擬似解像度セレクターなど、さまざまなタイプで利用できます。 アスタリスクで宣言されたユニバーサルCSSセレクターは、ページ上のすべての要素を選択し、要素タイプセレクターは同じ名前のHTML要素を見つけます。 ポンド符号で宣言されたID CSSセレクターは、一致するID属性を持つHTML要素を見つけますが、クラスセレクターはポイントで宣言され、すべての要素を一致するクラス属性と一致させます。 擬似クラスと擬似要素セレクターは、特定の状態の要素または要素の特定の部分のスタイルを可能にする特別なタイプのセレクターです（ホバリングやその親要素の最初の子要素であるなど）。 CSSセレクターとは何ですか？

CSSセレクターはCSSルールセットの一部であり、HTMLドキュメントの場所、または場所でスタイルする要素を選択できるようにします。利用可能なさまざまな種類のセレクターをすべて見て、それぞれを簡単に説明しましょう。これは、参照できる簡潔なCSSセレクタークイックルックアップテーブルです。

cssセレクターのタイプ

一般的なセレクター：各要素 要素タイプセレクター： などの特定のタイプの要素。

IDセレクター：たとえば、そのID属性で要素を選択します。 #myElement クラスセレクター：クラス属性で要素を選択します。たとえば、 。 .myClass サブセルセレクター：要素の直接の子孫（サブエレメント）。 ユニバーサルブラザーセレクター：HTMLのユニバーサルブラザー要素。 隣人兄弟セレクター：HTMLの直接兄弟要素。 属性セレクター：たとえば、HTML属性の存在および/または値に基づいています。 pseudo-Classセレクター： [type="text"] などの擬似クラスの存在に基づいています。 pseudo-elementセレクター： :hover 要素などの擬似要素用。 ::before ユニバーサルCSSセレクター ユニバーサルセレクター

ワイルドカードと同様に、ページ上のすべての要素を選択します。各HTMLページは、HTMLタグ内に配置されたコンテンツ上に構築されています。タグの各セットは、ページ上の要素を表します。ユニバーサルセレクターを使用する次のCSSの例をご覧ください。 Curlyブレース内の3行のコード（色、フォントサイズ、および行の高さ）は、HTMLページのすべての要素に適用されます。ここに示すように、ユニバーサルセレクターはアスタリスクを使用して宣言されます。他のセレクターと組み合わせてユニバーサルセレクターを使用することもできます。

* { color: green; font-size: 20px; line-height: 25px; } 要素タイプCSSセレクター

は「タイプセレクター」とも呼ばれ、同じ名前のHTML要素を一致させる必要があります。したがって、 nav セレクターはすべてのHTML nav 要素と一致し、 セレクターはすべてのHTMLの順序付けされていないリストまたは 要素と一致します。次の例では、要素タイプセレクターを使用して、すべての 要素に一致します。

これを説明するために、上記のCSSを適用するHTMLパーツは次のとおりです。 * { color: green; font-size: 20px; line-height: 25px; } このページの一部を構成する3つの主要な要素があります：2つの 要素と1つの

。 CSSは、2つの ul { list-style: none; border: solid 1px #ccc; } 要素にのみ適用されますが、 には適用されません。要素タイプセレクターを変更して の代わりに を使用すると、スタイルは両方の要素ではなく に適用されます。また、スタイルは または 要素内の要素には適用されないことに注意してください。つまり、特定のスタイルはこれらの内部要素によって継承される場合があります。 id css selector IDセレクターは、ハッシュまたはポンドサイン（＃）を使用して文字文字列の前に宣言します。キャラクター文字列は、開発者によって定義されます。このセレクターは、ID属性がセレクターの値と同じ値を持っているが、ハッシュシンボルを差し引いた任意のHTML要素と一致します。例は次のとおりです。 このCSSは、IDセレクターを使用してHTML要素と一致します。たとえば

この場合、

要素があらゆるHTML要素になる可能性があることは問題ではありません。スタイルは、 Fish Apples Cheese

Example paragraph text.

Water Juice Maple Syrup の値を持つID属性を持つ限り適用されます。 WebページのID要素は一意でなければなりません。つまり、特定のページの1つの要素のみが のIDを持っています。これにより、IDセレクターは非常に柔軟性がありません。これは、IDセレクタールールセットで使用されるスタイルはページごとに1回しか使用できないためです。同じIDを持つページに複数の要素がある場合でも、スタイルは適用されますが、技術的な観点からは、そのようなページのHTMLが無効であるため、そうすることを避ける必要があります。柔軟性の問題に加えて、IDセレクターには特異性が非常に高い問題もあります。

#container { width: 960px; margin: 0 auto; } クラスCSSセレクター container container クラスセレクターは、すべてのCSSセレクターの中で最も便利です。ドットで宣言され、その後に1つ以上の文字列が続きます。 IDセレクターと同様に、この文字文字列は開発者によって定義されます。また、クラスセレクターは、クラス属性をクラスと同じ値に設定するページ上のすべての要素と一致し、ポイントを差し引いています。次のルールセットを参照してください： これらのスタイルは、次のHTML要素に適用されます。 * { color: green; font-size: 20px; line-height: 25px; } 同じスタイルも、 box の値を持つクラス属性を持つ他のHTML要素にも適用されます。スタイルを再利用し、不必要な複製を避けることができるため、単一のページに同じクラス属性を持つ複数の要素を持つことが有益です。それに加えて、クラスセレクターの特異性は非常に低いです - 後で詳細に説明します。クラスセレクターが貴重な味方になるもう1つの理由は、HTMLが複数のクラスを単一の要素に追加できるようにすることです。これは、スペースを使用してHTMLクラスプロパティのクラスを分離することによって行われます。例は次のとおりです。

ul { list-style: none; border: solid 1px #ccc; } （スペースの制限により、次のコンテンツが簡単に要約され、重要な情報とコードの例が保持されます。完全な説明については、元のテキストを参照してください。） 目的地コンバイナー、サブコンビナー、一般的な兄弟コンバイナー、隣接する兄弟コンバイナー、属性セレクター、擬似クラスセレクター、擬似要素セレクター これらのセレクターの組み合わせ方法と使用方法は、元のテキストで詳細に説明されています。

宛先コンバイナー： スペースを使用して、親要素内のすべての子孫要素を選択します。

チャイルドコンビネーター： を使用して、親要素の直接の子要素のみを選択します。 ユニバーサルブラザーコンビネーター： > を使用して、その後のすべての兄弟要素を選択します。 隣人の兄弟組み合わせ： ~ を使用して、次の兄弟要素のみを選択します。 属性セレクター： を使用して、属性に基づいて要素を選択します。たとえば、 。 pseudo-classセレクター： [] を使用して、その状態に応じて要素を選択します。たとえば、 [type="text"] 、 。 pseudo-elementセレクター： : :hover を使用して、要素の特定の部分を選択します。たとえば、 :first-child 、 。 :: faq（faq） ::before CSSセレクターについてよく尋ねる質問は、元のテキストで詳細な回答が提供されており、ここでは説明しません。 ::after 上記の簡単な要約を通して、CSSセレクターのコア概念と使用を理解するのに役立つことを願っています。 詳細については、元のテキストを参照してください。

CSSセレクターチートシート

関連記事