CSS疑似クラス

CSS疑似クラスの基本を学ぶ

疑似クラスは、その要素に基づいて要素を選択するために使用される事前定義されたキーワードです。状態、または特定の子をターゲットにします。

彼らはで始まります単一のコロン :

これらはセレクターの一部として使用でき、アクティブリンクまたは訪問済みリンクのスタイルを設定する場合、たとえば、ホバー、フォーカス、または最初の子や奇数行のターゲットを変更する場合に非常に便利です。多くの場合、非常に便利です。

これらは、使用する可能性が高い最も人気のある疑似クラスです。

疑似クラス ターゲット
:active ユーザーによってアクティブ化されている要素(クリックなど)。主にリンクまたはボタンで使用されます
:checked 有効になっているチェックボックス、オプション、またはラジオ入力タイプ
:default 一連の選択肢のデフォルト(選択ボタンやラジオボタンのオプションなど)
:disabled 要素が無効になっています
:empty 子のない要素
:enabled 有効になっている要素(反対:disabled
:first-child 兄弟のグループの最初の子
:focus フォーカスのある要素
:hover マウスでホバリングした要素
:last-child 兄弟のグループの最後の子
:link 訪問されていないリンク
:not() 渡されたセレクターと一致しない要素。例えば:not(span)
:nth-child() 指定された位置に一致する要素
:nth-last-child() 末尾から開始して、特定の位置に一致する要素
:only-child 兄弟のない要素
:required を持つフォーム要素required属性セット
:root を表すhtml素子。ターゲティングのようなものですhtml、しかしそれはより具体的です。で便利CSS変数
:target 現在のURLフラグメントに一致する要素(ページ内の内部ナビゲーション用)
:valid クライアント側を正常に検証したフォーム要素
:visited 訪問したリンク

例を見てみましょう。実際、一般的なものです。リンクのスタイルを設定したいので、CSSルールを作成してa素子:

a {
  color: yellow;
}

1つのリンクをクリックするまで、問題はないようです。リンクをクリックすると、事前定義された色(青)に戻ります。次に、リンクを開いてページに戻ると、リンクは青色になっています。

なぜそれが起こるのですか?

クリックするとリンクの状態が変化し、:active状態。そしてそれが訪問されたとき、それは:visited状態。ユーザーが閲覧履歴をクリアするまで、永遠に。

したがって、すべての州でリンクを正しく黄色にするには、次のように書く必要があります。

a,
a:visited,
a:active {
  color: yellow;
}

:nth-child()特筆に値する。奇数または偶数の子供をターゲットにするために使用できます:nth-child(odd)そして:nth-child(even)

これは通常、リストで偶数行とは異なる奇数行に色を付けるために使用されます。

ul:nth-child(odd) {
  color: white;
	background-color: black;
}

これを使用して、要素の最初の3つの子をターゲットにすることもできます。:nth-child(-n+3)。または、5つの要素ごとに1つのスタイルを設定できます:nth-child(5n)

一部の疑似クラスは、印刷にのみ使用されます。:first:left:right、したがって、最初のページ、すべての左側のページ、およびすべての右側のページをターゲットにできます。これらは通常、わずかに異なるスタイルになっています。

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: