カテゴリー
CSS セレクタ 隣接セレクタ

【CSS】隣接セレクタ:隣接する要素のスタイルを適用する

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

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

<div>ああああ</div>
<p>良い良い</p>
<p>うううう</p>
div+p{background-color:red;}

【CSS】隣接セレクタ:隣接する要素のスタイルを適用する

 CSSの隣接セレクタは特定要素と同じ階層にある直後の隣接する要素に対しスタイルを適用します。選択方法としては「要素名+要素名{}」です。

カテゴリー
CSS セレクタ 子孫セレクタ

【CSS】子孫セレクタ:特定要素の子・孫要素にスタイルを適用する

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

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

<div>ああああ<p>良い良い</p></div>
<p>うううう</p>
<div><a href="#">ええええ</a></div>
div>p{background-color:red;}
div a{color:green;}

【CSS】子孫セレクタ:特定要素の子・孫要素にスタイルを適用する

 CSSの子孫セレクタは、特定要素の子・孫要素に対してスタイルを適用します。選択方法は「要素名 要素名{}」といった具合で半角スペースで区切ります。

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

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

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

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

<div>ああああ<p>良い良い</p></div>
<p>うううう</p>
<div><a href="#">ええええ</a></div>
div>p{background-color:red;}
div a{color:green;}

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

 CSSの子セレクタは、特定要素の子要素に対してスタイルを適用します。選択方法は「要素名>子要素{}」といった具合です。

カテゴリー
CSS セレクタ 複数セレクタ

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

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

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

<div>ああああ</div>
<p>良い良い</p>
div,p{color:red;}
p{background-color:blue;}

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

 CSSの複数セレクタは、複数の要素に対しスタイルを適用する際に使用します。選択方法としては「要素名,要素名{}」といった具合に「,(カンマ)」で要素名やクラス・id名などを区切り使用します。

カテゴリー
CSS セレクタ 属性セレクタ 属性値セレクタ

【CSS】属性値セレクタ:特定の属性値を持つ要素にスタイルを適用する

(例)【CSS】属性値セレクタの使用方法

See the Pen
要素名[属性名]{}
by linlin (@linlin098765)
on CodePen.

<a href="https://www.llc-linlin.com" title="Linlinのリンク">Linlin</a><br>
<a href="https://www.llc-linlin.com" target="_self">Linlin</a><br>
a[title] {background-color:red;}
a[target="_self"]{background-color:blue;}

【CSS】属性値セレクタ:特定の属性値を持つ要素にスタイルを適用する

 CSSの属性値セレクタは、特定の属性値を持つ要素に対しスタイルを適用します。適用形式としては、「要素名[属性名=”属性値”]{}」となります。

カテゴリー
CSS セレクタ 属性セレクタ

【CSS】属性セレクタ:特定の属性を持つ要素にスタイルを適用する

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

See the Pen
要素名[属性名]{}
by linlin (@linlin098765)
on CodePen.

<a href="https://www.llc-linlin.com" title="Linlinのリンク">Linlin</a><br>
<a href="https://www.llc-linlin.com" target="_self">Linlin</a><br>
a[title] {background-color:red;}
a[target="_self"]{background-color:blue;}

【CSS】属性セレクタ:特定の属性を持つ要素にスタイルを適用する

 CSSの属性セレクタは、特定の属性を持つ要素に対しスタイルを適用します。適用形式としては、「要素名[属性名]{}」となります。

カテゴリー
::after CSS セレクタ 擬似要素

【CSS】::after(擬似要素):要素の直後にコンテンツを挿入する

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

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

<div>ああああ</div>
div::after{content:"-良い良い";}

【CSS】::after(擬似要素):要素の直後にコンテンツを挿入する

 CSSの::afterは、要素の直後にコンテンツを挿入する擬似要素です。挿入するコンテンツはcontentプロパティで指定します。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。

カテゴリー
::before CSS セレクタ 擬似要素

【CSS】::before(擬似要素):要素の直前にコンテンツを挿入する

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

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

<div>ああああ</div
div::before{content:"良い良い-";}

【CSS】::before(擬似要素):要素の直前にコンテンツを挿入する

 CSSの::beforeは、要素の直前にコンテンツを挿入する擬似要素です。挿入するコンテンツはcontentプロパティで指定します。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。

カテゴリー
::first-letter CSS セレクタ 擬似要素

【CSS】::first-letter(擬似要素):要素の最初の文字にスタイルを適用する

(例)【CSS】::first-letterの使用方法

See the Pen
::first-letter
by linlin (@linlin098765)
on CodePen.

<div>ああああああああ</div>
div::first-letter{color:red;}

【CSS】::first-letter(擬似要素):要素の最初の文字にスタイルを適用する

 CSSの::first-letterは、ブロック要素の最初の文字にスタイルを適用する擬似要素です。インライン要素には適用できません。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。

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

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

(例)【CSS】::first-lineの使用方法

See the Pen
::first-line
by linlin (@linlin098765)
on CodePen.

<p>あああああ<br>
   良い良いい
</p>
p::first-line{color:red;}

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

 CSSの::first-lineは、ブロック要素の最初の行にスタイルを適用する擬似要素です。インライン要素には適用できません。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。