CSSセレクターのチートシートと詳細

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

最近、CSSセレクターに飛び込みました。

なじみのないシンボルを持つCSSセレクターは非常に多くあります>。 、* +〜[]など、CSSセレクターがどのように機能するかについてよく混乱していました。最終的に、私はそれらを頭の中でまっすぐにし、私が理解する方法を再設計しました。

*実際には、A4サイズの単一ページにそれらを整理して紙を保存し、地球を保存したかったのですが、追加できなかったため、複数のページに移動する必要があったため、できませんでした。 。表紙を除く4つのA4ページすべてです。

このチートシートを印刷して、壁に貼り付けます。それらを暗記しないで、ただのぞきます。このインフォグラフィックが、適切なCSSセレクターを迅速に見つけるのに役立ち、時間を節約できることを願っています。

CSSセレクターのチートシートRyan YuによるCSSセレクターゲーム

CSS CSSセレクターのチートシートをダウンロードしてゲームをお楽しみください🕹

心配ない。すべて無料です。

CSS CSSセレクターに飛び込みます。

インフォグラフィックをMDN定義とともにリストして、作業を簡単にします。

タイプセレクター

CSSタイプセレクタは、ノード名で要素を照合します。つまり、ドキュメント内の指定されたタイプのすべての要素を選択します。 -MDN

タイプセレクター

IDセレクター

id属性の値に基づいて要素を選択します。ドキュメントには、特定のIDを持つ要素が1つだけ存在する必要があります。 -MDN

IDセレクター

子孫セレクター

Aに一致する要素(子、または子の子など)の子孫であるBに一致する要素。コンビネータは、1つ以上のスペースまたは二重の大なり記号です。 -MDN

子孫セレクター

子孫とIDセレクターを組み合わせる

子孫とIDセレクターを組み合わせる

クラスセレクター

CSSクラスセレクターは、クラス属性の内容に基づいて要素を照合します。 -MDN

クラスセレクター

クラスセレクターを組み合わせる

クラスセレクターを組み合わせる

コンマコンビネーター

Aおよび/またはBに一致する要素-MDN

コンマコンビネーター

ユニバーサルセレクター

すべてを選択するだけです!

ユニバーサルセレクター

ユニバーサルセレクターを組み合わせる

ユニバーサルセレクターを組み合わせる

隣接する兄弟セレクター

隣接する兄弟コンビネータ(+)は2つのセレクタを分離し、最初の要素の直後にあり、両方が同じ親要素の子である場合にのみ2番目の要素と一致します。 -MDN

隣接する兄弟セレクター

一般的な兄弟セレクター

一般的な兄弟コンビネータ(〜)は、2つのセレクタを分離し、最初の要素に続く場合にのみ2番目の要素と一致します(ただし、必ずしもすぐではありません)。両方とも同じ親要素の子です。 -MDN

一般的な兄弟セレクター

子セレクター

子コンビネーター(>)は、2つのCSSセレクターの間に配置されます。最初の要素と一致する要素の子である、2番目のセレクタと一致する要素のみに一致します。 -MDN

子セレクター

最初の子疑似セレクター

:first-child CSS擬似クラスは、兄弟要素のグループの最初の要素を表します。 -MDN

最初の子疑似セレクター

子の疑似セレクターのみ

:only-child CSS擬似クラスは、兄弟のない要素を表します。これは:first-child:last-childまたは:nth-​​child(1):nth-​​last-child(1)と同じですが、より低い特異性があります。 -MDN

子の疑似セレクターのみ

最後の子の擬似セレクター

:last-child CSS擬似クラスは、兄弟要素のグループの最後の要素を表します。 -MDN

最後の子の擬似セレクター

N番目の子疑似セレクター

:nth-​​child()CSS擬似クラスは、兄弟グループ内の位置に基づいて要素を照合します。 -MDN

N番目の子疑似セレクター

N番目の最後の子セレクター

:nth-​​last-child()CSS擬似クラスは、兄弟のグループ内での位置に基づいて、最後から数えて要素を照合します。 -MDN

N番目の最後の子セレクター

タイプセレクターの最初

:first-of-type CSS擬似クラスは、兄弟要素のグループの中でその型の最初の要素を表します。 -MDN

タイプセレクターの最初

型セレクターのN番目

:nth-​​of-type()CSS擬似クラスは、兄弟グループ間の位置に基づいて、指定されたタイプの要素に一致します。 -MDN

型セレクターのN番目

数式を含むN番目のタイプセレクター

Nth-of-typeセレクター
注:
:nth-​​of-type(even)
:nth-​​of-type(奇数)
:nth-​​of-type(2)
:nth-​​of-type(2n)
:nth-​​of-type(3n-1)
:nth-​​of-type(2n + 2)

タイプセレクターのみ

:only-of-type CSS擬似クラスは、同じタイプの兄弟を持たない要素を表します。 -MDN

タイプセレクターのみ

最後のタイプセレクター

:last-of-type CSS擬似クラスは、兄弟要素のグループの中でその型の最後の要素を表します。 -MDN

最後のタイプセレクター

空のセレクター

:empty CSS擬似クラスは、子を持たない要素を表します。子は、要素ノードまたはテキスト(空白を含む)のいずれかです。コメント、処理命令、およびCSSコンテンツは、要素が空と見なされるかどうかには影響しません。 -MDN

空のセレクター

否定擬似クラス

:not()CSS擬似クラスは、セレクターのリストに一致しない要素を表します。特定の項目が選択されないようにするため、否定擬似クラスとして知られています。 -MDN

否定擬似クラス

属性セレクター

属性セレクターは、属性と属性値に基づいて要素を照合する特別な種類のセレクターです。それらの汎用構文は、属性名とそれに続く属性の値と一致するオプションの条件を含む角括弧([])で構成されます。属性セレクターは、属性値の一致方法に応じて、プレゼンス属性セレクターと値属性セレクター、およびサブストリング値属性セレクターの2つのカテゴリーに分類できます。 -MDN

属性セレクター

属性値セレクター

属性値セレクター

セレクタで始まる属性

このセレクタは、値がvalで始まる属性attrを持つすべての要素を選択します。 -MDN

セレクタで始まる属性

属性はセレクタで終わる

このセレクタは、値がvalで終わる属性attrを持つすべての要素を選択します。 -MDN

属性はセレクタで終わる

属性ワイルドカードセレクター

このセレクターは、値にサブストリングvalが含まれる属性attrを持つすべての要素を選択します。 (サブストリングは単にストリングの一部です。たとえば、「cat」はストリング「caterpillar」のサブストリングです。)-MDN

属性ワイルドカードセレクター

おめでとうございます、完了しました

記事

🕹CodePen

questions質問やフィードバック

私はあなたのためにそれをより良くすることができる方法についてのあなたのフィードバックを聞きたいです。以下にコメントを残すか、Twitterを使用してください。

yan CSSセレクターゲームの作成を手伝ってくれたRyan Yuに大いに感謝します。 Ryan Yuはの著者であり、私は多くのクールなフロントエンド技術を学びました。

今日はハッピーなコードサイン