カテゴリー
:first-child CSS セレクタ 擬似クラス

【CSS】:first-child(擬似クラス):最初の子要素にスタイルを適用する

【CSS】:first-child(擬似クラス):最初の子要素にスタイルを適用する

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(擬似クラス):最初の子要素にスタイルを適用する

 CSSの:first-childは、要素の最初の子要素にスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。

カテゴリー
:lang CSS セレクタ 擬似クラス

【CSS】:lang(擬似クラス):特定言語の要素にスタイルを適用する

(例)【CSS】:langの使用方法

See the Pen
:lang
by linlin (@linlin098765)
on CodePen.

<div>aaaaaaaaa</div>
div:lang(en){color:red;}

【CSS】:lang(擬似クラス):特定言語の要素にスタイルを適用する

 CSSの:langは、特定言語の要素に対してスタイルを適用する擬似クラスです。:langの適用方法は「要素orクラス名orid名:擬似クラス(言語)」です。

:langの指定言語の例

  • ja・・・日本語
  • en・・・英語
  • fr・・・フランス語
  • zh・・・中国語
カテゴリー
:focus CSS セレクタ 擬似クラス

【CSS】:focus:フォーカスした要素にスタイルを適用する

(例)【CSS】:focusの使用方法

See the Pen
:focus
by linlin (@linlin098765)
on CodePen.

<input type="text">
input:focus{background-color:red;}

【CSS】:focus:フォーカスした要素にスタイルを適用する

 CSSの:focusは、要素をフォーカスした際にスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。

カテゴリー
:active CSS セレクタ 擬似クラス

【CSS】:active(擬似クラス):クリック中の要素にスタイルを適用する

(例)【CSS】:activeの使用方法

See the Pen
:active
by linlin (@linlin098765)
on CodePen.

<div>ああああ</div>
div:active{background-color:red;}

【CSS】:active(擬似クラス):クリック中の要素にスタイルを適用する

 CSSの:activeは、クリック中の要素に対してスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。

カテゴリー
:hover CSS セレクタ 擬似クラス

【CSS】:hover(擬似クラス):マウスカーソル上の要素にスタイルを適用する

(例)【CSS】:hoverの使用方法

See the Pen
:hover
by linlin (@linlin098765)
on CodePen.

<div>あああああああ</div>
div:hover{background-color:red;}

【CSS】:hover(擬似クラス):マウスカーソル上の要素にスタイルを適用する

 CSSの:hoverは、マウスカーソルを要素の上に置いている際に適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。

カテゴリー
:visited CSS セレクタ 擬似クラス

【CSS】:visited(擬似クラス):訪問済リンクにスタイルを適用する

(例)【CSS】:visited(擬似クラス)の使用方法

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(擬似クラス):訪問済リンクにスタイルを適用する

 CSSの:visited(擬似クラス)は、訪問済リンクにスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。

カテゴリー
:link CSS セレクタ

【CSS】:link(擬似クラス):未訪問リンクにスタイルを適用する

(例)【CSS】:link(擬似クラス)の使用方法

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】:link(擬似クラス):未訪問リンクにスタイルを適用する

 CSSの:visited(擬似クラス)は、未訪問リンクにスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。

カテゴリー
CSS idセレクタ セレクタ

【CSS】idセレクタ:id名の要素にスタイルを適用する

(例)【CSS】idセレクタの使用方法

See the Pen
idセレクタ
by linlin (@linlin098765)
on CodePen.

<div id="sample">ああああ</div>
#sample{color:red;}

【CSS】idセレクタ:id名の要素にスタイルを適用する

 CSSのidセレクタは、id属性によってid名を指定した要素に対してスタイルを適用するセレクタです。id属性によるid名の指定は、同じHTMLファイル内(ホームページの1ページ)で1箇所しか指定できません。
 idセレクタのスタイル適用方法は、id名の前に「#(ショープ)」を指定し「#id名{}」でスタイルを適用します。

カテゴリー
classセレクタ CSS セレクタ

【CSS】classセレクタ:クラス名の要素にスタイルを適用する

(例)【CSS】classセレクタの使用方法

See the Pen
classセレクタ
by linlin (@linlin098765)
on CodePen.

<div class="sample">あああ</div>
<p class-"sample">良いい</p>
.sample{color:red;}

【CSS】classセレクタ:クラス名の要素にスタイルを適用する

 CSSのclassセレクタは、class属性によりクラス名を指定した要素に対しスタイルを適用するセレクタです。class属性によるクラス名の指定は、同一名で何箇所でも指定可能です。
 classセレクタはクラス名の前に「.(ドット)」を指定して「.class名{}」でスタイルが適用可能となります。

カテゴリー
CSS セレクタ 全称セレクタ

【CSS】全称セレクタ:全要素にスタイルを適用する

(例)【CSS】全称セレクタの使用方法

See the Pen
全称セレクタ
by linlin (@linlin098765)
on CodePen.

<div>ああああ</div>
<p>良い良い</p>
*{color:red;}

【CSS】全称セレクタ:全要素にスタイルを適用する

 CSSの全称セレクタは、全ての要素にスタイルを適用するセレクタです。「*{}」で全要素をセレクタ可能です。