トップへ(mam-mam.net/)

CSSのセレクター、疑似クラス、疑似要素の解説

CSSのセレクター、疑似クラス、疑似要素の解説

ウェブデザインにおける重要な要素であるCSSセレクター、疑似クラス、疑似要素の使い方について詳しく解説します。
CSSセレクターとはHTMLドキュメント内の特定の要素を選択してスタイルを適用する方法です。
疑似クラスはCSSにおいて要素の状態や条件に応じてスタイルを適用する仕組みです。
疑似要素はCSSで要素の一部、又は要素の内容を拡張した部分にスタイルを適用する仕組みです。

CSSのセレクター概要

セレクタ 名称 概要
* 全称セレクター ページ内全ての要素 *{ padding:0; }
p
等のタグ名
要素型セレクター 指定したタグ名(ノード名)
の要素全て
div{ padding:8px; }
h4{ color:red; font-size:24px; }
.クラス名 クラスセレクター 指定したクラス名(ノード名)
の要素全て
.red24{ color:red; font-size:24px; }
div.myclass{ margin:0; padding:4px; }
#ID名 IDセレクター 指定したID名の要素 #id1{ display:flex; flex-wrap:wrap; justify-content:space-evenly; }
div#myid{ margin:0; padding:4px; }
[属性] 属性セレクター 指定した属性を持つ要素 a[href]{ text-decoration:underline blue 2px; text-decoration-style:dotted; }
[属性="値"] 属性セレクター 指定した属性が指定した値の要素 a[href="https://mam-mam.net/"]{ text-decoration-style:wavy; text-underline-offset:2px; }
[属性^="値"] 属性セレクター 指定した属性が指定した値から始まる要素 a[href^="https://mam"]{ text-decoration:underline red; text-decoration-style:wavy; }
[属性$="値"] 属性セレクター 指定した属性が指定した値で終わる要素 a[href$=".net/"]{ text-underline-offset:4px; }
[属性*="値"] 属性セレクター 指定した属性が指定した値を含む要素 a[href*="mam-mam"]{ text-decoration-style:dashed; }
[属性~="単語"] 属性セレクター 指定した属性が指定した単語を含む要素 属性値が空白で区切られた単語リストで、その中の単語が指定値と一致するとき
(例)<div class="box red big">class属性はリスト</div>
[class~="red"]{ border: 2px solid red; }
要素A,要素B 複数セレクタ 「要素A」又は「要素B」の両方 div,p,table{ border: 2px solid red; }
.class1,.class2{ color:red; }
div#id1,div#id2,p.class1{ font-weight:bold; color:red; }
要素A 要素B
(間に半角スペース)
子孫セレクター 「要素A」内の全ての子要素B、孫要素B、ひ孫要素B、・・・ div #id1{ border: 2px solid red; }
div.class1 .class2{ color:red; }
要素A>要素B 子セレクター 「要素A」内の全ての直近の子要素Bのみ
(孫、ひ孫の要素などは含まない)
div.myfrex{display:flex; flex-wrap:nowrap; box-sizing:border-box; width:100%; }
div.myfrex>*{ width:20em; max-width:100%; }
div.myfrex>*:last-child{ margin-left:auto; }
要素A+要素B 隣接セレクター 要素Aと同じ親要素内にある「要素A」より後ろに隣接する要素Bに適用 /* h4と同じ親要素内のh4より後に隣接するp */
h4+p{background:#FBB;}
要素A~要素B 間接セレクター 要素Aと同じ親要素内にある「要素A」より後ろにある兄弟要素B全てに適用 /* h4と同じ親要素内のh4より後の全ての要素p */
h4~p{background:#FBB;}

CSSの疑似クラス概要

疑似クラス 概要
要素A:first-child 要素Aの親要素内にある最初の子要素が「要素A」 (例)pタグの親要素内(div)にある最初の要素がpタグなら、そのpタグに適用される
div>p:first-child{ background:#FBB; }
要素A:last-child 要素Aの親要素内にある最後の子要素が「要素A」 (例)pタグの親要素内(div)にある最後の要素がpタグなら、そのpタグに適用される
div>p:last-child{ background:#FBB; }
要素A:first-of-type 「要素A」の親要素内にある「要素A」の最初の要素 p:first-of-type{ background:#FBB; }
div.class1>p:first-of-type{ background:#FBB; }
要素A:last-of-type 「要素A」の親要素内にある「要素A」の最後の要素 p:last-of-type{ background:#FBB; }
div.flex>div:last-of-type{ margin-left:auto; }
要素A:nth-child(n) 「要素A」の親要素内にある全ての要素の中でn番目の「要素A」
odd(奇数番目)、even(偶数番目)、3n、3n+1等が使える
p:nth-child(1){ background:#FBB; }
div.class1>*:nth-child(3n){ background:#FBB; }
要素A:nth-of-type(n) 「要素A」の親要素内にある全ての「要素A」の中で「要素A」がn番目
odd(奇数番目)、even(偶数番目)、3n、3n+1等が使える
p:nth-of-type(1){ background:#FBB; }
div.class1>p:nth-of-type(3n+1){ background:#FBB; }
要素A:nth-last-child(n) 「要素A」の親要素内にある全ての要素の中で最後からn番目の「要素A」
odd(奇数番目)、even(偶数番目)、3n、3n+1等が使える
p:nth-last-child(even){ background:#FBB; }
div.flex>*:nth-last-child(1){ margin-left:auto; }
要素A:nth-last-of-type(n) 「要素A」の親要素内にある全ての「要素A」の中で「要素A」が最後からn番目
odd(奇数番目)、even(偶数番目)、3n、3n+1等が使える
p:nth-last-of-type(1){ background:#FBB; }
div.class1>p:nth-last-of-type(2n){ background:#FBB; }
要素A:only-child 「要素A」の親要素内で「要素A」が唯一の子要素 親要素内に子要素が1個のみで、それがpタグの場合
p:only-child{ background:#FBB; }
要素A:only-of-type 「要素A」の親要素内に指定した「要素A」が1つ 親要素内に1つ又は複数の要素があり、その内pタグが1つしかない場合
p:only-of-type{ background:#FBB; }
:empty 子要素もテキストも持たない要素 p:empty{ width:200px;background:#FBB; }

div>p:empty{ padding-left:1.2em;}
div>p:empty::before{ content:"■"; color:blue; padding-left:0.1em; }
:checked ラジオボタン、チェックボックス、
selectタグ内のoptionでチェックされている要素
input[type="checkbox"]:checked{ width:32px; height:32px; }

(例)チェックボックスがオンだと「On」オフだと「Off」に文字が切り替わる
<style>
  label.chk>input[type="checkbox"]~span:first-of-type{display:none;}
  label.chk>input[type="checkbox"]~span:last-of-type{display:inline;}
  label.chk>input[type="checkbox"]:checked~span:first-of-type{display:inline;}
  label.chk>input[type="checkbox"]:checked~span:last-of-type{display:none;}
</style>

<label class="chk">
  <input type="checkbox" />
  <span>On</span><span>Off</span>
</label>
:active アクティブ時(マウス左ボタンを押したまま)の要素 button:active{ background:#FBB; }
:hover ホバー時(マウスポインターが重なる)の要素 button:hover{ background:#BFB; }
a:link aタグで未訪問のリンク
(まだクリックされていないリンク)
a:link{ color:blue; }
a:visited aタグで既に訪問済みのリンク
(クリック済みのリンク)
a:visited{ color:purple; }
:disabled 無効化されたフォーム要素 input[type="text"]:disabled{ background:grey; }
:readonly 読み取り専用のフォーム要素 input[type="text"]:readonly{ background-color:lightgray; }
:focus フォーカスがある要素 :focus{ outline: 2px solid green; }

(例)
<div class="canfocus" tabindex="0">フォーカス可能</div>
div.canfocus:focus{ background:#BFB; }
:root ルート要素(HTMLタグのことになる) /*カスタムCSS変数の定義 */
:root{ --main-color: #333; }
:target URLのハッシュ部分(#)で指定された被ハッシュリンク要素
(Aタグでhref="#id"として指定されたidが付与された要素)
(例)
<a href="#myid">リンクタグ</a>
<div id="myid">背景が黄色になる</div>
<style>div#myid:target{ background-color:yellow; }</style>
:not(条件) 条件に一致する対象を除いた要素 (例)クラス「abc」が無いdiv要素
div:not(.abc){ background:#BFB; }
(例)属性「href」が無いa要素
a:not([href]){ cursor:pointer; }
:has(条件) 条件に一致する子要素を持つ要素 (例)クラス「abc」の子要素を持つdiv要素
div:has(.abc){ background:#BFB; }
(例)子要素に属性「href」があるa要素を持つdiv要素
div:has(a[href]){ background:#BFB; }

CSSの疑似要素概要

疑似要素 概要
要素A::first-line 要素Aの最初の1行目のみ p.line::first-line{ font-weight:bold; }
要素A::first-letter 要素Aの最初の1文字目のみ p.letter::first-letter{ font-size:1.6em; }
要素A::before
要素A::after
要素Aの前(::before)や要素Aの後(::after)にcontentプロパティで指定した値を入れることが出来る p.bf::before{ content:"■"; color:blue; }
p.bf::after{ content:"(New!)"; color:red; }
::placeholder 入力フィールド内のプレースホルダー input[type="text"]::placeholder{ color:gray; font-style:italic; }
::file-selector-button ファイル入力フィールド(<input type="file">)のボタン input[type="file"]::file-selector-button{ background:lightblue; border:none; }
::selection テキストを選択したときの選択範囲
(背景色や文字色のスタイル変更のみ)
::selection{ background:yellow; color:black; }
::marker リスト項目(ul や li)のマーカー li::marker{ color:green; font-size:20px; content:"■";}
::backdrop dialog要素でモーダルダイアログ表示中の外側の背景 dialog::backdrop{ background:#F8F8F8; }
::cue video要素でVTT(WebVTT)と連携した字幕 video::cue{ font-size:20px; color:#fff; background:rgba(0,0,0, 0.7); }

セレクター、疑似クラス、疑似要素の使用例

全称セレクター

(例)全ての要素を「マージン4px」「パディング8px」にする

<style>
  *{
    margin:4px;
    padding:2px;
  }
</style>

要素型セレクター

指定したタグ名(ノード名)の要素全てに適用
(例)h5タグ全ての背景を"#DDD"色にする

<style>
  h5{background:#DDD;}
</style>

<h4>この要素は適用されない</h4>

<h5>この要素に適用</h5>

クラスセレクター

指定したクラス属性を持つ全ての要素に適用

<style>
  .font12{
    font-size:12px;
  }
  .backBlue{
    background:#88AAFF;
  }
</style>
<div>フォントサイズはデフォルト

 <p class="backBlue">背景色が青っぽい色</p>

</div>
<div class="font12">フォントサイズ12px

 <p class="backBlue">背景色が青っぽい色</p>

 <p>背景色はデフォルト色</p>

</div>

IDセレクター

指定したID属性を持つ要素に適用

<style>
  #font10{
    font-size:10px;
  }
  #backPink{
    background:#FFBBBB;
  }
</style>
<div id="font10">フォントサイズ10px

 <p id="backPink">背景色がピンクっぽい色</p>

 <p>背景色はデフォルト色</p>

</div>

属性セレクター

指定した属性を持つ要素に適用されます

指定した属性を持つ要素に適用
[属性]
指定した属性の値が指定した値の要素に適用
[属性="属性の値"]
指定した属性の値が指定した値から始まる要素に適用
[属性^="属性の値"]
指定した属性の値が指定した値で終わる要素に適用
[属性$="属性の値"]
指定した属性の値が指定した値を含む要素に適用
[属性*="属性の値"]
<style>
  /* href属性を持つ */
  [href]{
    background:#BBB;
  }
  /* href属性の値が"https://mam-mam.net/" */
  [href="https://mam-mam.net/"]{
    background:#FBB;
  }
  /* href属性の値が"/javascript."から始まる */
  [href^="/javascript."]{
    background:#BFB;
  }
  /* href属性の値が"display_flex.html"で終わる */
  [href$="display_flex.html"]{
    background:#BBF;
  }
  /* href属性の値が"js_pager"を含む */
  [href*="js_pager"]{
    background:#DDF;
  }
</style>
<a>リンク</a>
<a href="">#BBB</a>
<a href="https://mam-mam.net/">#FBB</a>
<a href="/javascript.html">#BFB</a>
<a href="/javascript/css_display_flex.html">#BBF</a>
<a href="/javascript/js_pager.html">#DDF</a>

要素名.クラス名セレクター

「要素名」かつ「クラス名」に適用

<style>
  div.divclass{
    background:#FBB;
  }
</style>
<div class="divclass">背景色が適用される</div>
<div>背景色は適用されない</div>

要素A,要素B (複数セレクター)

「要素A」又は「要素B」の両方に適用

<style>
  /* 「DIVタグのクラス"or1"」または「DIVタグのクラス"or2"」に適用する。 */
  div.or1 , div.or2{
    background:#FBB;
  }
</style>
<div class="or1">背景色が適用される</div>
<div class="or2">背景色が適用される</div>
<div class="or3">背景色は適用されない</div>
<div>背景色は適用されない</div>

<p class="or1">背景色は適用されない</p>

要素名#IDセレクター

「要素名」かつ「ID」に適用

<style>
  div#divid{
    background:#FBB;
  }
</style>
<div id="divid">背景色が適用される</div>
<div>背景色は適用されない</div>

<p id="divid">背景色は適用されない</p>

要素A 要素B(子孫セレクター)

「要素A」内の全ての子要素B、孫要素B、曽孫要素B、・・・に適用

<style>
  div.divParent .allChildren{
    background:#FBB;
  }
</style>
<div class="divParent">
 <div>背景色は適用されない</div>
 <div class="allChildren">背景色は適用される</div>
 <div>
  <div>背景色は適用されない

   <p class="allChildren">背景色は適用される</p>

  </div>
  <div class="allChildren">背景色は適用される</div>

  <p class="allChildren">背景色は適用される</p>

 </div>
</div>

要素A>要素B(子セレクター)

「要素A」内の全ての子要素のみの要素Bに適用
孫要素、曽孫要素、・・・には適用しない

<style>
  div.divParent>.onlyChildren{
    background:#FBB;
  }
</style>
<div class="divParent">
 <div>背景色は適用されない</div>
 <div class="onlyChildren">背景色は適用される</div>
 <div>
  <div>背景色は適用されない

   <p class="onlyChildren">背景色は適用されない</p>

  </div>
  <div class="onlyChildren">背景色は適用されない</div>

  <p class="onlyChildren">背景色は適用されない</p>

 </div>
 <div class="onlyChildren">背景色は適用される</div>
</div>

要素A+要素B(隣接セレクター)

同じ親要素内にある「要素A」より後に隣接する要素Bに適用

<style>
  h4+p.nearH4{
    background:#FBB;
  }
</style>
<div>

 <p class="nearH4">背景色が適用されない</p>

 <h4>h4タグのテキスト</h4>

 <p class="nearH4">h4タグより後に隣接しているので背景色が適用される</p>

 <p class="nearH4">背景色が適用されない</p>

 <p class="nearH4">背景色が適用されない</p>

 <h4>h4タグのテキスト</h4>

 <div>背景色が適用されない</div>

 <p class="nearH4">h4タグより後に隣接していないので背景色が適用されない</p>

 <p class="nearH4">背景色が適用されない</p>

</div>

要素A~要素B(間接セレクター)

同じ親要素内にある「要素A」より後の要素Bに適用

<style>
  h4~p.inDirectH4{
    background:#FBB;
  }
</style>
<div>

 <p class="inDirectH4">背景色が適用されない</p>

 <h4>h4タグのテキスト</h4>

 <p class="inDirectH4">背景色が適用される</p>

 <p class="inDirectH4">背景色が適用される</p>

 <p>背景色が適用されない</p>

 <div>
  背景色が適用されない

  <p class="inDirectH4">背景色が適用されない</p>

 </div>

 <p>背景色が適用されない</p>

 <p class="inDirectH4">背景色が適用される</p>

</div>

要素A:first-child[疑似クラス]

「要素A」の親要素内にある最初の要素が「要素A」なら適用

<style>
  p.example_first:first-child{
    background:#FBB;
  }
</style>
<div>
 <div class="example_first">背景色が適用されない</div>

 <p class="example_first">背景色が適用されない</p>

</div>
<div>

 <p class="example_first">背景色が適用される</p>

 <p class="example_first">背景色が適用されない</p>

</div>
<div>

 <p>背景色が適用されない</p>

 <p class="example_first">背景色が適用されない</p>

</div>

要素A:last-child[疑似クラス]

「要素A」の親要素内にある最後の要素が「要素A」なら適用

<style>
  p.example_last:last-child{
    background:#FBB;
  }
</style>
<div>

 <p class="example_last">背景色が適用されない</p>

 <div class="example_last">背景色が適用されない</div>
</div>
<div>

 <p class="example_last">背景色が適用されない</p>

 <p class="example_last">背景色が適用される</p>

</div>
<div>

 <p class="example_last">背景色が適用されない</p>

 <p>背景色が適用されない</p>

</div>

要素A:first-of-type[疑似クラス]

「要素A」の親要素内にある全ての「要素A」の最初の要素が適用

<style>
  div.example_fot>p:first-of-type{
    background:#FBB;
  }
</style>
<div class="example_fot">
 <div>背景色が適用されない</div>

 <p>背景色が適用される</p>

 <p>背景色が適用されない</p>

</div>
<div>

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

</div>
<div class="example_fot">

 <p>背景色が適用される</p>

 <p>背景色が適用されない</p>

</div>

要素A:last-of-type[疑似クラス]

「要素A」の親要素内にある全ての「要素A」の最後の要素が適用

<style>
  div.example_lot>p:last-of-type{
    background:#FBB;
  }
</style>
<div class="example_lot">
 <div>背景色が適用されない</div>

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>
<div>

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

</div>
<div class="example_lot">

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>

要素A:nth-child(n)[疑似クラス]

「要素A」の親要素内にある全ての要素の中で「要素A」がn番目の場合に適用されます。 nには任意の数値や odd(奇数番目)や even(偶数番目)や 式が使えます。 例えば、3の倍数番目 3n や 3の倍数+1番目 3n+1 や 3の倍数+2番目 3n+2 を使用できます。

<style>
  /* 2番目に適用 */
  div.example_nthc>p:nth-child(2){
    background:#FBB;
  }
  /* 3の倍数番目(3,6,9,12,・・・)に適用 */
  div.example_nthc3n>p:nth-child(3n){
    background:#BFB;
  }
  /* 3の倍数+1番目(1,4,7,10,・・・)に適用 */
  div.example_nthc3n>p:nth-child(3n+1){
    background:#BBF;
  }
  /* 3の倍数+2番目(2,5,8,11,・・・)に適用 */
  div.example_nthc3n>p:nth-child(3n+2){
    background:#BFF;
  }
</style>
<div class="example_nthc">
 <div>背景色が適用されない</div>

 <p>背景色が適用される</p>

 <p>背景色が適用されない</p>

</div>
<div class="example_nthc">

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>
<div class="example_nthc3n">
 <div>背景色が適用されない</div>

 <p>3n+2の背景色が適用される</p>

 <p>3n の背景色が適用される</p>

 <p>3n+1の背景色が適用される</p>

</div>
<div class="example_nthc3n">

 <p>3n+1の背景色が適用される</p>

 <p>3n+2の背景色が適用される</p>

 <p>3n の背景色が適用される</p>

 <p>3n+1の背景色が適用される</p>

</div>

要素A:nth-of-type(n)[疑似クラス]

「要素A」の親要素内にある全ての「要素A」の中で「要素A」がn番目の場合に適用されます。 nには任意の数値や odd(奇数番目)や even(偶数番目)や 式が使えます。 例えば、3の倍数番目 3n や 3の倍数+1番目 3n+1 や 3の倍数+2番目 3n+2 を使用できます。

<style>
  /* 2番目に適用 */
  div.example_nthot>p:nth-of-type(2){
    background:#FBB;
  }
  /* 3の倍数番目(3,6,9,12,・・・)に適用 */
  div.example_nthot3n>p:nth-of-type(3n){
    background:#BFB;
  }
  /* 3の倍数+1番目(1,4,7,10,・・・)に適用 */
  div.example_nthot3n>p:nth-of-type(3n+1){
    background:#BBF;
  }
  /* 3の倍数+2番目(2,5,8,11,・・・)に適用 */
  div.example_nthot3n>p:nth-of-type(3n+2){
    background:#BFF;
  }
</style>
<div class="example_nthot">
 <div>背景色が適用されない</div>

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>
<div class="example_nthot">

 <p>背景色が適用されない</p>

 <p>背景色が適用される</p>

</div>
<div class="example_nthot3n">
 <div>背景色が適用されない</div>

 <p>3n+1の背景色が適用される</p>

 <p>3n+2の背景色が適用される</p>

 <p>3n の背景色が適用される</p>

</div>
<div class="example_nthot3n">

 <p>3n+1の背景色が適用される</p>

 <p>3n+2の背景色が適用される</p>

 <p>3n の背景色が適用される</p>

 <p>3n+1の背景色が適用される</p>

</div>

要素A:nth-last-child(n)[疑似クラス]

nth-child(n)とほぼ同じですが、要素を最後から数えるところが違います。
「要素A」の親要素内にある全ての要素の中で「要素A」が最後から数えてn番目の場合に適用されます。 nには任意の数値や odd(奇数番目)や even(偶数番目)や 式が使えます。 例えば、3の倍数番目 3n や 3の倍数+1番目 3n+1 や 3の倍数+2番目 3n+2 を使用できます。

要素A:nth-last-of-type(n)[疑似クラス]

nth-of-type(n)とほぼ同じですが、要素を最後から数えるところが違います。
「要素A」の親要素内にある全ての「要素A」の中で「要素A」が最後から数えてn番目の場合に適用されます。 nには任意の数値や odd(奇数番目)や even(偶数番目)や 式が使えます。 例えば、3の倍数番目 3n や 3の倍数+1番目 3n+1 や 3の倍数+2番目 3n+2 を使用できます。

要素A:only-child[疑似クラス]

「要素A」の親要素内で「要素A」が唯一の子要素の場合に適用されます。

<style>
  div.example_oc>p:only-child{
    background:#FBF;
  }
</style>
<div class="example_oc">

 <p>背景色が適用される</p>

</div>
<div class="example_oc">

 <p>背景色が適用されない</p>

 <div>背景色が適用されない</div>
</div>
<div class="example_oc">

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

 <div class="example_oc">

  <p>背景色が適用される</p>

 </div>
</div>

要素A:only-of-type[疑似クラス]

「要素A」の親要素内に指定した「要素A」が1つの場合に適用されます。

<style>
  div.example_oot>p:only-of-type{
    background:#FBF;
  }
</style>
<div class="example_oot">

 <p>背景色が適用される</p>

</div>
<div class="example_oot">
 <div>背景色が適用されない</div>

 <p>背景色が適用される</p>

</div>
<div class="example_oot">

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

 <div class="example_oot">

  <p>背景色が適用される</p>

 </div>
</div>

要素A:empty[疑似クラス]

「要素A」が子要素を持たない(テキストも持たない)場合に適用されます。

<style>
  div.example_emp>p:empty{
    background:#FBF;
    height:16px;
    width:64px;
    display:inline-block;
  }
</style>
<div class="example_emp">

 <p>背景色が適用されない</p>

 <p>背景色が適用されない</p>

 <p>

←背景が適用されている</p>
</div>

要素A:checked[疑似クラス]

「要素A」がラジオボタン、チェックボックス、selectタグ内のオプションで、「要素A」がチェックされていたりONだった場合に適用されます。

<style>
  input[type="checkbox"]:checked{
    width:32px;
    height:32px;
  }
</style>

チェックボックスにチェックをすると大きくなります。

要素A:active[疑似クラス]

「要素A」がアクティブ時にスタイルが適用されます。

<style>
  .example_active{
    display:inline-block;
    margin:auto;
    padding:1.0em;
    color:#000;
    text-shadow:1px 1px 2px #999;
    background:#EEE;
    border:0px none #000;
    text-decoration:none;
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
    cursor:pointer;
    border-radius:0px 0px 0px 0px;
    vertical-align:middle;
  }
  .example_active:active{
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
  }
</style>
<a href="javascript:void(0)" class="example_active">ここでマウスボタンを押したままにするとスタイル適用</a>
ここでマウスボタンを押したままにするとスタイル適用

要素A:hover[疑似クラス]

「要素A」にマウスポインターを重ねた時にスタイルが適用されます。

<style>
  .example_hover{
    display:inline-block;
    margin:auto;
    padding:1.0em;
    color:#000;
    text-shadow:1px 1px 2px #999;
    background:#EEE;
    border:0px none #000;
    text-decoration:none;
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6);
    cursor:pointer;
    border-radius:0px 0px 0px 0px;
    vertical-align:middle;
    transition:all 0.5s;
  }
  .example_hover:active{
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.6) inset;
  }
  .example_hover:hover{
    background:#FBF;
  }
</style>
<a href="javascript:void(0)" class="example_hover">ここにマウスポインターを重ねるとスタイル適用</a>
(例)
ここにマウスポインターを重ねるとスタイル適用

要素A:focus[疑似クラス]

「要素A」にフォーカスがある時にスタイルが適用されます。

<style>
  .example_focus:focus{
    border:solid 4px #A00;
    outline:none;
  }
</style>
<input type="text" class="example_focus" value="フォーカス時に適用" />
(例)

要素A:not(条件)[疑似クラス]

条件に一致する対象を除いた要素Aにスタイルが適用されます。

<style>
  /* pタグで example_notクラスが指定されているが、
     not_classクラスが指定されていない要素に適用 */
  p.example_not:not(.not_class){
    background:#FBB;
  }
</style>
(例)

<p class="example_not">適用</p>

<p class="example_not">適用</p>

<p class="example_not not_class">適用されない</p>

要素A:has(条件)[疑似クラス]

条件に一致する子要素を持つ要素Aにスタイルが適用されます。

<style>
  /* class="has"のpタグの子要素にspanを持つ要素に適用 */
  p.has:has(span){
    background:#FBB;
  }
</style>
(例)

<p class="has">子要素にspanを持つので<span>適用</span></p>

<p class="has">
  子要素にspan要素を持たず、孫要素にspanを持つので適用されない

  <div><span>孫要素のspan</span></div>
</p>

<p class="has">子要素にspan要素を持たないので適用されない</p>

要素A::first-line[疑似要素]

要素Aの1行目のみにスタイルが適用されます。

<style>
  p.example_fl::first-line{
    background:#FBB;
  }
</style>
<p class="example_fl">1行目だけ適用<br>2行目は未適用</p>
(例)

1行目だけ適用
2行目は未適用

要素A::first-letter[疑似要素]

要素Aの1文字目のみにスタイルが適用されます。

<style>
  p.example_flt::first-letter{
    font-size:200%;
    font-weight:bold;
  }
</style>
<p class="example_flt">1文字目だけ適用</p>
(例)

1文字目だけ適用

要素A::before 及び 要素A::after[疑似要素]

要素Aの前(::before)及び 要素Aの後(after)にcontentプロパティで指定した値を入れることができます。

<style>
  p.example_bf::before{
    content:"■";
    color:blue;
    font-weight:bold;
  }
  p.example_bf::after{
    content:"New!!";
    color:red;
    font-weight:bold;
  }
</style>
<p class="example_bf">前後にcontentが付きます</p>
(例)

前後にcontentが付きます

dialog要素::backdrop[疑似要素]

dialog要素でモーダルダイアログ表示中(showModal)のダイアログの外側の背景の要素を示します。

<style>
    dialog.dlg::backdrop{
      background:linear-gradient(90deg, rgba(220,230,255,0.2), rgba(80,120,255,0.2));
    }
</style>

<button style="border-radius:4px;" onclick="showDlg()">モーダルダイアログの表示</button>
<dialog class="dlg">
  <p>モーダルダイアログです。<br>全体の背景が::backdrop疑似要素で指定した色になっています。</p>
  <button onclick="closeDlg()" style="border-radius:4px;">閉じる</button>
</dialog>

<script>
  function showDlg(){
    document.querySelector(".dlg").showModal();
  }
  function closeDlg(){
    document.querySelector(".dlg").close();
  }
</script>
(例)

モーダルダイアログです。
全体の背景が::backdrop疑似要素で指定した色になっています。