See the Pen
隣接セレクタ by linlin (@linlin098765)
on CodePen.
<div>ああああ</div>
<p>良い良い</p>
<p>うううう</p>div+p{background-color:red;}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の子孫セレクタは、特定要素の子・孫要素に対してスタイルを適用します。選択方法は「要素名 要素名{}」といった具合で半角スペースで区切ります。
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の子セレクタは、特定要素の子要素に対してスタイルを適用します。選択方法は「要素名>子要素{}」といった具合です。
See the Pen
複数セレクタ by linlin (@linlin098765)
on CodePen.
<div>ああああ</div>
<p>良い良い</p>div,p{color:red;}
p{background-color:blue;}CSSの複数セレクタは、複数の要素に対しスタイルを適用する際に使用します。選択方法としては「要素名,要素名{}」といった具合に「,（カンマ）」で要素名やクラス・id名などを区切り使用します。
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の属性値セレクタは、特定の属性値を持つ要素に対しスタイルを適用します。適用形式としては、「要素名[属性名=”属性値”]{}」となります。
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の属性セレクタは、特定の属性を持つ要素に対しスタイルを適用します。適用形式としては、「要素名[属性名]{}」となります。
See the Pen
::after by linlin (@linlin098765)
on CodePen.
<div>ああああ</div>div::after{content:"-良い良い";}CSSの::afterは、要素の直後にコンテンツを挿入する擬似要素です。挿入するコンテンツはcontentプロパティで指定します。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。
See the Pen
::before by linlin (@linlin098765)
on CodePen.
<div>ああああ</divdiv::before{content:"良い良い-";}CSSの::beforeは、要素の直前にコンテンツを挿入する擬似要素です。挿入するコンテンツはcontentプロパティで指定します。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。
See the Pen
::first-letter by linlin (@linlin098765)
on CodePen.
<div>ああああああああ</div>div::first-letter{color:red;}CSSの::first-letterは、ブロック要素の最初の文字にスタイルを適用する擬似要素です。インライン要素には適用できません。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。
See the Pen
::first-line by linlin (@linlin098765)
on CodePen.
<p>あああああ<br>
良い良いい
</p>p::first-line{color:red;}CSSの::first-lineは、ブロック要素の最初の行にスタイルを適用する擬似要素です。インライン要素には適用できません。擬似要素の適用方法は「要素orクラス名orid名::擬似要素」です。