CSS疑似クラス

❮ 前次 ❯

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

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

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

ユーザーが要素の上にマウスを置いたときに要素のスタイルを設定する
訪問したリンクと訪問していないリンクのスタイルが異なる
フォーカスがかかったときに要素のスタイルを設定する

マウスオーバーミー

構文

疑似クラスの構文：

selector:pseudo-class {
property: value;
}

アンカー疑似クラス

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

例

/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

注：効果を上げるには、CSS定義の後に a:hover来る必要があります。効果を上げるには、CSS定義の後に来る必要があります。疑似クラス名では大文字と小文字は区別されません。a:linka:visiteda:activea:hover

疑似クラスとHTMLクラス

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

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

例

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

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

:hover<div>要素で疑似クラスを使用する例：

例

div:hover {
background-color: blue;
}

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

<div>要素にカーソルを合わせると、<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疑似クラスの使用方法を示しています。

すべてのCSS疑似クラス

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the <input> element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects <input> elements with a value within a specified range
:invalid	input:invalid	Selects all <input> elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"
:last-child	p:last-child	Selects every <p> elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects <input> elements with no "required" attribute
:out-of-range	input:out-of-range	Selects <input> elements with a value outside a specified range
:read-only	input:read-only	Selects <input> elements with a "readonly" attribute specified
:read-write	input:read-write	Selects <input> elements with no "readonly" attribute
:required	input:required	Selects <input> elements with a "required" attribute specified
:root	root	Selects the document's root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all <input> elements with a valid value
:visited	a:visited	Selects all visited links

すべてのCSS疑似要素

Selector	Example	Example description
::after	p::after	Insert content after every <p> element
::before	p::before	Insert content before every <p> element
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
::selection	p::selection	Selects the portion of an element that is selected by a user

❮ 前次 ❯

CSSチュートリアル

CSS Advanced

CSSレスポンシブ

CSSグリッド

CSS SASS

CSSの例

CSSリファレンス