【CSS】擬似要素、擬似クラス
cssの擬似要素、擬似クラスを使用例などを付けてまとめてみました。
擬似要素
・要素の一部に対して指定する。（CSS#では「:」を2つ付ける）
::before
・要素の直前に内容を挿入する。
css
p::before {
content:"★";
}
html
<p>こんにちは</p>
ブラウザの表示
★こんにちは
::after
・要素の直後に内容を挿入する
css
p:before {
content:"★";
}
html
<p>こんにちは</p>
ブラウザの表示
こんにちは★
::first-letter
・要素の最初の文字にスタイルを適用する。
css
p:first-letter {
color:#ff0000;
}
html
<p>こんにちは</p>
ブラウザの表示
こんにちは
::first-line
・要素の最初の行にスタイルを適用する。
css
p:first-line {
color:#ff0000;
}
html
<p>おはよう<br> こんにちは<br> こんばんわ</p>
ブラウザの表示
おはよう
こんにちは
こんばんわ
::selection
・指定要素の文字選択時のスタイルを適応する。
css
p::selection {
background-color:#ff0000;
color: #fff;
}
html
<p>こんにちは</p>
ブラウザの表示
こんにちは
※記事掲載現在では、::selection擬似要素は標準路線上のどのCSSモジュールにも存在しません。
擬似クラス
・指定した要素全体にかかる。
:focus
・フォーカスされた要素にスタイルを適用する
（フォームの入力欄にカーソルがある状態など）
css
input:focus {
background-color:#ccffcc;
}
html
名前 <input type="text" name="namae" size="30">
ブラウザの表示
名前
:lang
・特定の言語を指定された要素にスタイルを適用する。
css
p:lang(en) {
color:#ff0000;
}
html
<p>こんにちは</p> <p lang="en">good afternoon</p>
ブラウザの表示
こんにちは
good afternoon
:target
・リンクのターゲット先となる要素へのスタイル指定
css
:target {
background-color:#ff0000;
color:#fff;
}
html
<p><a href="#link">リンクします</a></p> <p id="link">リンクされると色が変わります</p>
ブラウザの表示
リンクされると色が変わります
:root
・文書のルートとなる要素へのスタイル指定（HTML文書ならばhtml要素がルートになる）。
css
:root {
background-color:#ff0000;
}
※上記の指定だとhtml要素に背景色「赤」のスタイル指定になります。
:nth-child
・指定要素のうちの指定番目にスタイル指定。
css
/* 2番目のliにスタイル指定 */
ul li:nth-child(2) {
color:#ff0000;
}
/* 偶数番目のliにスタイル指定 */
ul li:nth-child(odd) {
color:#00ff00;
}
/* 奇数番目のliにスタイル指定 */
ul li:nth-child(even) {
color:#0000ff;
}
:nth-last-child
・指定要素の中で後ろから数えた指定番目にスタイル指定。
css
/* 後ろから2番目のliにスタイル指定 */
ul li:nth-last-child(2) {
color:#ff0000;
}
:nth-of-type
・指定要素のその種類のうちの指定番目にスタイル指定。
css
/* 2番目のliにスタイル指定 */
ul li:nth-of-type(2) {
color:#ff0000;
}
/* 偶数番目のliにスタイル指定 */
ul li:nth-of-type(odd) {
color:#00ff00;
}
/* 奇数番目のliにスタイル指定 */
ul li:nth-of-type(even) {
color:#0000ff;
}
:nth-last-of-type
・指定要素のその種類の中で後ろから数えた指定番目にスタイル指定。
css
/* 後ろから2番目のliにスタイル指定 */
ul li:nth-last-of-type(2) {
color:#ff0000;
}
:first-child
・指定要素と同じ最初の要素にスタイル指定。
css
p:first-child {
color:#ff0000;
}
html
<p>おはよう</p> <p>こんにちは</p>
ブラウザの表示
おはよう
こんにちは
:last-child
・指定要素と同じ最後の要素にスタイル指定。
css
p:last-child {
color:#ff0000;
}
html
<p>おはよう</p> <p>こんにちは</p>
ブラウザの表示
おはよう
こんにちは
:first-of-type
・指定要素と同じ種類の最初の要素にスタイル指定。
css
p:first-of-type {
color:#ff0000;
}
html
<p>おはよう</p> <p>こんにちは</p>
ブラウザの表示
おはよう
こんにちは
:last-of-type
・指定要素と同じ種類の最後の要素にスタイル指定。
css
p:last-of-type {
color:#ff0000;
}
html
<p>おはよう</p> <p>こんにちは</p>
ブラウザの表示
おはよう
こんにちは
:only-child
・指定要素の親要素内で、指定要素が1つだけの場合にスタイルが適応される。
css
.contents p:only-child {
color:#ff0000;
}
html
<div class="contents"> <p>おはよう</p> <p>こんにちは</p> </div> <div class="contents"> <p>こんばんわ</p> </div>
ブラウザの表示
おはよう
こんにちは
こんばんわ
:only-of-type
・指定要素の親要素内で、指定要素の種類が1つだけの場合にスタイルが適応される。
css
.contents p:only-of-type {
color:#ff0000;
}
html
<div class="contents"> <p>おはよう</p> <p>こんにちは</p> </div> <div class="contents"> <h2>夜の挨拶</h2> <p>こんばんわ</p> </div>
ブラウザの表示
おはよう
こんにちは
夜の挨拶
こんばんわ
:empty
・指定要素の内容が空の要素にスタイルを適応
css
table td:empty {
background-color:#ff0000;
}
html
<table> <tr> <td>鉛筆</td> <td>5本</td> </tr> <tr> <td>ボールペン</td> <td></td> </tr> <tr> <td>消しゴム</td> <td>3個</td> </tr> </table>
ブラウザの表示
| 鉛筆 | 5本 |
| ボールペン | |
| 消しゴム | 3個 |
:not
・条件に当てはまる要素以外にスタイルを適応する。
css
a:not([href*="yahoo.co.jp"]) {
color:#ff0000;
}
p:not(.aClass) {
background-color:#ff0000;
color:#fff;
}
html
<p class="aClass"><a href="https://yahoo.co.jp">Yahoo!</a> <a href="https://www.google.co.jp">google</a></p> <p>リンクなし</p>
ブラウザの表示
:enabled
・フォームのinput、textareaなどが使用可能な状態のときにスタイルが適応されます。
css
textarea:enabled {
background-color:#ff0000;
}
html
<textarea></textarea> <textarea disabled></textarea>
ブラウザの表示
:disabled
・フォームのinput、textareaなどが使用不可能な状態のときにスタイルが適応されます。
css
textarea:disabled {
background-color:#ccc;
}
html
<textarea></textarea> <textarea disabled></textarea>
ブラウザの表示
:checked
・フォームのラジオボタン、チェックボックスでチェックが入っているときにスタイルが適応されます。
css
input[type="checkbox"]:checked {
outline: inset 6px #ffff00;
}
html
<input type="checkbox" id="fruit1" name="fruit" value="りんご"><label for="fruit1">りんご</label> <input type="checkbox" id="fruit2" name="fruit" value="バナナ"><label for="fruit2">バナナ</label> <input type="checkbox" id="fruit3" name="fruit" value="みかん"><label for="fruit3">みかん</label>
ブラウザの表示
コメントを残す