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

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

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

CSSのセレクター概要

CSSの疑似クラス概要

<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>

CSSの疑似要素概要

全称セレクター

（例）全ての要素を「マージン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>

IDセレクター

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

<style>
  #font10{
    font-size:10px;
  }
  #backPink{
    background:#FFBBBB;
  }
</style>

属性セレクター

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

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

[属性]

指定した属性の値が指定した値の要素に適用

[属性="属性の値"]

指定した属性の値が指定した値から始まる要素に適用

[属性^="属性の値"]

指定した属性の値が指定した値で終わる要素に適用

[属性$="属性の値"]

指定した属性の値が指定した値を含む要素に適用

[属性*="属性の値"]

<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>

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

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

<style>
  div.divclass{
    background:#FBB;
  }
</style>

要素A,要素B （複数セレクター）

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

<style>
  /* 「DIVタグのクラス"or1"」または「DIVタグのクラス"or2"」に適用する。 */
  div.or1 , div.or2{
    background:#FBB;
  }
</style>

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

要素名#IDセレクター

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

<style>
  div#divid{
    background:#FBB;
  }
</style>

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

要素A 要素B（子孫セレクター）

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

<style>
  div.divParent .allChildren{
    background:#FBB;
  }
</style>

要素A>要素B（子セレクター）

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

<style>
  div.divParent>.onlyChildren{
    background:#FBB;
  }
</style>

要素A+要素B（隣接セレクター）

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

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

要素A~要素B（間接セレクター）

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

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

要素A:first-child［疑似クラス］

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

<style>
  p.example_first:first-child{
    background:#FBB;
  }
</style>

要素A:last-child［疑似クラス］

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

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

要素A:first-of-type［疑似クラス］

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

<style>
  div.example_fot>p:first-of-type{
    background:#FBB;
  }
</style>

要素A:last-of-type［疑似クラス］

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

<style>
  div.example_lot>p:last-of-type{
    background:#FBB;
  }
</style>

要素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>

要素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>

要素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>

要素A:only-of-type［疑似クラス］

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

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

要素A:empty［疑似クラス］

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

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

要素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>

要素A:has(条件)［疑似クラス］

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

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

要素A::first-line［疑似要素］

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

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

要素A::first-letter［疑似要素］

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

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

要素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>

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>