See the Pen
:lang by linlin (@linlin098765)
on CodePen.
<div>
<h3>h3-1<h3>
<p>p-1</p>
<h3>h3-2<h3>
<p>p-2</p>
</div>h3:first-child{color:red;}CSSの:first-childは、要素の最初の子要素にスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。
See the Pen
:lang by linlin (@linlin098765)
on CodePen.
<div>aaaaaaaaa</div>div:lang(en){color:red;}CSSの:langは、特定言語の要素に対してスタイルを適用する擬似クラスです。:langの適用方法は「要素orクラス名orid名:擬似クラス(言語)」です。
See the Pen
:focus by linlin (@linlin098765)
on CodePen.
<input type="text">input:focus{background-color:red;}CSSの:focusは、要素をフォーカスした際にスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。
See the Pen
:active by linlin (@linlin098765)
on CodePen.
<div>ああああ</div>div:active{background-color:red;}CSSの:activeは、クリック中の要素に対してスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。
See the Pen
:hover by linlin (@linlin098765)
on CodePen.
<div>あああああああ</div>div:hover{background-color:red;}CSSの:hoverは、マウスカーソルを要素の上に置いている際に適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。
See the Pen
:link,:visited by linlin (@linlin098765)
on CodePen.
<a href="https://www.llc-linlin.com">Linlinのリンク</a>a:link{color:red;}
a:visited{color:green;}CSSの:visited（擬似クラス）は、訪問済リンクにスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。
See the Pen
:link,:visited by linlin (@linlin098765)
on CodePen.
<a href="https://www.llc-linlin.com">Linlinのリンク</a>a:link{color:red;}
a:visited{color:green;}CSSの:visited（擬似クラス）は、未訪問リンクにスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。