カテゴリー: CSS

（例）【CSS】コメントアウトの仕様方法

/*  CSSのコメント  */
div{background-color:red;}

【CSS】コメントアウト：CSSにコメントを記述する

　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】子孫セレクタの使用方法

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】子セレクタの使用方法

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】複数セレクタの使用方法

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

<div>ああああ</div>
<p>良い良い</p>

div,p{color:red;}
p{background-color:blue;}

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

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

（例）【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】属性セレクタの使用方法

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