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名:擬似クラス」です。
See the Pen
idセレクタ by linlin (@linlin098765)
on CodePen.
<div id="sample">ああああ</div>#sample{color:red;} CSSのidセレクタは、id属性によってid名を指定した要素に対してスタイルを適用するセレクタです。id属性によるid名の指定は、同じHTMLファイル内（ホームページの１ページ）で１箇所しか指定できません。
idセレクタのスタイル適用方法は、id名の前に「#（ショープ）」を指定し「#id名{}」でスタイルを適用します。
See the Pen
classセレクタ by linlin (@linlin098765)
on CodePen.
<div class="sample">あああ</div>
<p class-"sample">良いい</p>.sample{color:red;} CSSのclassセレクタは、class属性によりクラス名を指定した要素に対しスタイルを適用するセレクタです。class属性によるクラス名の指定は、同一名で何箇所でも指定可能です。
classセレクタはクラス名の前に「.（ドット）」を指定して「.class名{}」でスタイルが適用可能となります。
See the Pen
全称セレクタ by linlin (@linlin098765)
on CodePen.
<div>ああああ</div>
<p>良い良い</p>*{color:red;}CSSの全称セレクタは、全ての要素にスタイルを適用するセレクタです。「*{}」で全要素をセレクタ可能です。