TECH I.S.

CSSの擬似クラスとは？擬似クラスの種類まとめ

疑似クラスとは

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

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

  • ユーザーが要素の上にマウスを置いたときに要素のスタイルを設定する
  • 訪問済みリンクと未訪問リンクのスタイルを変える
  • 要素がフォーカスされたときにスタイルを設定する

マウスオーバーミー

構文

疑似クラスの構文:

selector:pseudo-class {   property: value; }

アンカー疑似クラス

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

例

/* 未訪問リンク*/ a:link {   color: #FF0000; } /*訪問済みリンク*/ a:visited {   color: #00FF00; } /* リンクにマウスオーバー */ a:hover {   color: #FF00FF; } /* 選択したリンク */ a:active {   color: #0000FF; }

自分で試してみる »


注： a:hoverを有効にするには、CSS定義でa:linkとa:visitedの後に記述する必要があります。a:activeを有効にするには、CSS定義でa:hoverの後に記述する必要があります。疑似クラス名は大文字と小文字を区別しません。

疑似クラスとHTMLクラス

疑似クラスは、HTMLクラスと組み合わせることができます。

例のリンクにカーソルを合わせると、色が変わります。

例

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

自分で試してみる »

<div>にカーソルを合わせます

使用例:hover<div> 要素の疑似クラス

例

div:hover {   background-color: blue; }

自分で試してみる »


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

<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>要素に一致

次の例では、セレクターはすべての<p>要素の最初の<i>要素に一致します。

例

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

自分で試してみる »

すべての最初の子<p>要素のすべての<i>要素に一致

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

例

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

自分で試してみる »

CSS - :lang疑似クラス

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

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

例

<html> <head> <style> q:lang(no) {   quotes: "~" "~"; } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> </html>

自分で試してみる »

その他の例

ハイパーリンクにさまざまなスタイルを追加する
この例は、他のスタイルをハイパーリンクに追加する方法を示しています。

:focusの使用
この例は、:focus疑似クラスの使用方法を示しています。

すべての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 nput:in-range 指定された範囲内の値を持つ<input>要素を選択します。
:invalid input:invalid 無効な値を持つすべての<input>要素を選択します。
:lang(language) p:lang(it) "it"で始まるlang属性値を持つすべての<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 「必須」属性のない<input>要素を選択します。
:out-of-range input:out-of-range 指定された範囲外の値を持つ <input> 要素を選択します。
:read-only input:read-only 「読み取り専用」属性が指定された<input>要素を選択します。
:read-write input:read-write 「読み取り専用」属性のない<input>要素を選択します。
:required input: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>要素の最初の行を選択します。
::marker ::marker リスト項目のマーカーを選択します。
::selection p::selection ユーザーが選択した要素の部分を選択します。


チュートリアル