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); } |