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名::擬似要素」です。
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名:擬似クラス」です。