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

CSSでは、セレクターはDOM要素を選択するために使用されるパターンです。

セレクターの使用例を次に示します。次のコードではah1はセレクターです。

a { color: black; } h1 { font-size 24px; }

一般的なセレクターのチートシート

headheadタグ付きの要素を選択します

.red 'red'クラスのすべての要素を選択します

#nav 'nav'IDを持つ要素を選択します

div.rowdivタグと「行」クラスを持つすべての要素を選択します

["]aria-hidden値が「true」の属性を持つすべての要素を選択します

  • ワイルドカードセレクター。すべてのDOM要素を選択します。他のセレクターでの使用については、以下を参照してください

セレクターを面白い方法で組み合わせることができます

いくつかの例:

li aDOM子孫コンビネータ。aタグの子であるすべてのliタグ

div.row *divタグと「行」クラスを持つ要素の子孫(または子)であるすべての要素を選択します

li > a差分コンビネータ。子孫セレクターのようなすべての子孫ではなく、直接の子孫を選択します

li + a隣接するコンビネータ。前の要素の直前の要素を選択します。この場合、a各の後に最初ののみli

li, aすべてのa要素とすべてのli要素を選択します。

li ~ a兄弟コンビネータ。a要素に続くli要素を選択します。

疑似セレクターまたは疑似構造クラス

これらは、DOMから構造要素を選択する場合にも役立ちます。

それらのいくつかを次に示します。

:first-child 別の要素のすぐ内側(またはその子)の最初の要素をターゲットにする

:last-child 別の要素のすぐ内側(またはその子)の最後の要素をターゲットにする

:nth-child()別の要素のすぐ内側(またはその子)にあるn番目の要素をターゲットにします。認めている整数、evenodd、または式

a:not(.name)クラスに属さaないすべての要素を選択します.name

::afterHTMLの代わりにCSSからページにコンテンツを挿入できます。最終結果は実際にはDOMにありませんが、ページにはあるかのように表示されます。このコンテンツは、HTML要素の後に読み込まれます。

::beforeHTMLの代わりにCSSからページにコンテンツを挿入できます。最終結果は実際にはDOMにありませんが、ページにはあるかのように表示されます。このコンテンツは、HTML要素の前に読み込まれます。

疑似クラスを使用して、DOMの要素の特別な状態を定義できます。しかし、それらはそれ自体では要素を指していません。

いくつかの例:

:hover マウスポインタでホバーされている要素を選択します

:focus キーボードまたはプログラムでフォーカスを受け取る要素を選択します

:active マウスポインタでクリックされている要素を選択します

:link まだクリックされていないすべてのリンクを選択します

:visited すでにクリックされているリンクを選択します

n番目の子セレクターの詳細

nth-childセレクタは、兄弟の間でそれらの位置に対して一つ以上の要素に一致するようにすることによってパターンを取るCSSの擬似クラスです。

構文

 a:nth-child(pattern) { /* Css goes here */ }

パターン

によって受け入れられるパターンはnth-child、キーワードの形式またはAn + Bの形式の方程式で提供されます。

キーワード

奇数

Oddは、指定されたタイプのすべての奇数要素を返します。

 a:nth-childe(odd) { /* CSS goes here */ }
でも

Evenは、指定されたタイプのすべての偶数要素を返します。

 a:nth-childe(even) { /* CSS goes here */ }

An + B

(0に加えて)nのすべての正の整数値について、方程式An + Bに一致するすべての要素を返します。

たとえば、以下は3番目のアンカー要素ごとに一致します。

 a:nth-childe(3n) { /* CSS goes here */ }

ゲーム

CSS Dinerは、セレクターの組み合わせについて知っておくべきほとんどすべてのことを教えるWebゲームです。

その他の参考資料

CSSセレクターは他にもたくさんあります!それらについては、CodeTuts、CSS-tricks.com、またはMozilla DeveloperNetworkで学んでください。