CSS 疑似クラス

CSS 結合セレクター CSS 疑似要素

目次

  1. 疑似クラスとは何ですか?
  2. 構文
  3. アンカー擬似クラス
  4. 疑似クラスと CSS クラス
  5. <div> にカーソルを置きます
  6. シンプルなツールチップのホバー
  7. CSS - :first-child
  8. すべての <p> 要素の最初の <i> 要素と一致します。
  9. 最初の <p> 要素内のすべての <i> 要素と一致します
  10. CSS - :lang 疑似クラス
  11. すべての CSS 疑似クラス
  12. すべての CSS 疑似要素

疑似クラスとは何ですか?

疑似クラスは、要素の特別な状態を定義するために使用されます。

たとえば、次の目的で使用できます。

  • 要素の上にマウスを置いたときにスタイルを設定します
  • 訪問済みリンクと未訪問リンクのスタイルを変える
  • 要素がフォーカスを取得したときにスタイルを設定する
私の上にマウスを置いてください

構文

疑似クラスの構文:

selector:pseudo-class {
  property: value;
}

アンカー擬似クラス

リンクはさまざまな方法で表示できます。

例

/* 未訪問のリンク */
a:link {
  color: #FF0000;
}

/* 訪問したリンク */
a:visited {
  color: #00FF00;
}

/* マウスオーバーリンク */
a:hover {
  color: #FF00FF;
}

/* 選択されたリンク */
a:active {
  color: #0000FF;
}

CSS 链接

ホームリンク

注:a:hover は CSS の a:link と a:visited に含まれている必要があります定義 が有効になります。 a:active を有効にするには、CSS 定義の a:hover の後に指定する必要があります。 疑似クラス名では大文字と小文字が区別されません。

疑似クラスと CSS クラス

疑似クラスは CSS クラスと組み合わせて使用​​できます。

例のリンクの上にマウスを置くと、色が変わります。

例

a.highlight:hover {
  color: #ff0000;
}

ホームリンク

<div> にカーソルを置きます

<div> 要素で :hover 擬似クラスのインスタンスを使用する:

例

div:hover {
  background-color: blue;
}

背景色を変更するには、下の div 要素の上にマウスを移動してください。

シンプルなツールチップのホバー

<div> 要素の上にマウスを置くと、<p> 要素が表示されます (ツールチップなど)。

私の上にマウスを置くと、<p> 要素が表示されます。

やあ、ここにいます!

 

实例

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS - :first-child

:first-child 擬似クラスは、指定された要素、つまり別の要素の最初の子である要素と一致します。

最初の <p> 要素と一致します

次の例では、セレクターは、任意の要素の最初の子である任意の <p> 要素と一致します。

例

p:first-child {
  color: blue;
}

これはテキストです。

これはテキストです。

すべての <p> 要素の最初の <i> 要素と一致します。

次の例では、セレクターはすべての

要素の最初の <i> 要素と一致します。

例

p i:first-child {
  color: blue;
}

私は強い男です。 私は強い男です。

私は強い男です。 私は強い男です。

最初の <p> 要素内のすべての <i> 要素と一致します

次の例では、セレクターは、別の要素の最初の子である <p> 要素内のすべての <i> 要素と一致します。

例

p:first-child i {
  color: blue;
}

私は強い男です。 私は強い男です。

私は強い男です。 私は強い男です。

CSS - :lang 疑似クラス

:lang 擬似クラスを使用すると、さまざまな言語に特別なルールを定義できます。

以下の例では、:lang は、属性 lang="en" を持つ <q> 要素の引用符を定義します。

例

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

Some text A quote in a paragraph Some text.

この例では、:lang は lang="en": を使用して q 要素の引用符を定義します。

すべての CSS 疑似クラス

セレクター 例 例の説明
:active a:active アクティブなリンクを選択します。
:checked input:checked 選択した各 <input> 要素を選択します。
:disabled input:disabled 無効になっているすべての <input> 要素を選択します。
:empty p:empty 子のないすべての <p> 要素を選択します。
:enabled input:enabled 有効な各 <input> 要素を選択します。
:first-child p:first-child 親の最初の子であるすべての <p> 要素を選択します。
:first-of-type p:first-of-type 親の最初の <p> 要素であるすべての <p> 要素を選択します。
:focus input:focus フォーカスされている <input> 要素を選択します。
:hover a:hover マウスオーバーでリンクを選択。
:in-range input:in-range 指定された範囲内の値を持つ <input> 要素を選択します。
:invalid input:invalid 無効な値を持つすべての <input> 要素を選択します。
:lang(language) p:lang(it) lang 属性値が <it> で始まる各 <p> 要素を選択します。
:last-child p:last-child 親の最後の子である各 <p> 要素を選択します。
:last-of-type p:last-of-type 親の最後の <p> 要素であるすべての <p> 要素を選択します。
:link a:link 未訪問のリンクをすべて選択します。
:not(selector) :not(p) <p> 要素ではないすべての要素を選択します。
:nth-child(n) p:nth-child(2) 親の 2 番目の子であるすべての <p> 要素を選択します。
:nth-last-child(n) p:nth-last-child(2) 最後の子から数えて、親の 2 番目の子である各 <p> 要素を選択します。
:nth-last-of-type(n) p:nth-last-of-type(2) 最後の子から数えて、親の 2 番目の <p> 要素である各 <p> 要素を選択します
:nth-of-type(n) p:nth-of-type(2) 親の 2 番目の <p> 要素であるすべての <p> 要素を選択します。
:only-of-type p:only-of-type その親の唯一の <p> 要素である各 <p> 要素を選択します。
:only-child p:only-child 親の唯一の子である <p> 要素を選択します。
:optional input:optional "required"属性のない <input> 要素を選択します。
:out-of-range input:out-of-range 指定された範囲外の値を持つ <input> 要素を選択します。
:read-only input:read-only "readonly" 属性を指定する <input> 要素を選択します。
:read-write input:read-write "readonly" 属性のない <input> 要素を選択します。
:required input:required "required" 属性を指定する <input> 要素を選択します。
:root root は要素のルート要素を選択します。
:target #news:target 現在アクティブな #news 要素を選択します (アンカー名を含む URL をクリックします)。
:valid input:valid 有効な値を持つすべての <input> 要素を選択します。
:visited a:visited 訪問したすべてのリンクを選択します。

すべての CSS 疑似要素

セレクター 例 例の説明
::after p::after 各 <p> 要素の後にコンテンツを挿入します。
::before p::before 各 <p> 要素の前にコンテンツを挿入します。
::first-letter p::first-letter 各 <p> 要素の最初の文字を選択します。
::first-line p::first-line 各 <p> 要素の最初の行を選択します。
::selection p::selection ユーザーが選択した要素の部分を選択します。
CSS 結合セレクター CSS 疑似要素