Zenn
🐸

【HTML・CSS】擬似要素と擬似クラス

2021/05/08に公開
CSS
HTML
tech

擬似要素と擬似クラス

擬似要素と擬似クラスの違いは以下の通りである。

擬似要素 擬似クラス
役割 要素の一部に対してスタイルを適用する 要素全体に対してスタイルを適用する
CSSの指定 セレクタ::擬似要素 セレクタ:擬似クラス

以下で詳しい使い方を見ていこう。
※簡略化のためHTMLファイルはbody部のみ載せる。

擬似要素

擬似要素は要素の一部に対してスタイルを適用できる。

first-letter

first-letterは要素の先頭文字にスタイルを適用できる。

index.html
<body>
  <h1>擬似要素入門です。</h1>
</body>
style.css
h1::first-letter {
    color: red;
    font-size: 40px;
}

ブラウザ表示結果↓

first-line

first-lineは要素１行にスタイルを適用できる。

index.html
<body>
  <h1>擬似要素入門です。</h1>
</body>
style.css
h1::first-line {
    color: red;
}

ブラウザ表示結果↓

before

beforeは要素の先頭にスタイルを適用できる。

index.html
<body>
  <h1>うがいをしましょう。</h1>
</body>
style.css
h1::before {
    content: url(images/ugai.png)
}

ブラウザ表示結果↓

after

afterは要素の末尾にスタイルを適用できる。

index.html
<body>
  <h1>うがいをしましょう。</h1>
</body>
style.css
h1::after {
    content: url(images/ugai.png)
}

selection

selectionは要素のドラッグ時にスタイルを適用できる。

index.html
<body>
  <h1>選択時に色を変えます。</h1>
</body>
style.css
h1::selection {
    color: gold;
    background-color: red;
}

ブラウザ表示結果↓

marker

markerはリスト項目の箇条書き記号にスタイルを適用できる。
display: list-itemが設定された要素で適用されます

index.html
<body>
  <ol>
    <li>みかん</li>
    <li>りんご</li>
    <li>バナナ</li>
    <li>メロン</li>
    <li>いちご</li>
  </ol>
</body>
style.css
ol li::marker {
    color: blue;
    font-size: 1.2em;
}

ブラウザ表示結果↓

擬似要素としてよく使用するであろう6つ紹介しました。
以下の公式サイトに他にも擬似要素がありますので、詳しくはこちらをこ参照ください。

擬似クラス

擬似要素は要素全体に対してスタイルを適用できる。

active

activeはアクティブ化されている要素にスタイルを適用できる。
アクティブ化とはふつう、マウスでボタンを押し下げたときに始まる。

index.html
<body>
  <h1>擬似クラス入門です。</h1>
</body>
style.css
h1:active {
    color: blue;
}

ブラウザ表示結果(選択すると青に変化)↓

enabled

enabledは活性化(有効)されている要素にスタイルを適用できる。

index.html
<body>
  <input type="button" value="ボタン">
</body>
style.css
input:enabled {
    color: red;
}

ブラウザ表示結果↓

disabled

disabledは非活性化(無効)されている要素にスタイルを適用できる。

index.html
<body>
  <input type="button" value="ボタン" disabled>
</body>
style.css
input:disabled {
    color: blue;
}

ブラウザ表示結果↓

first-child

first-childはある兄弟要素の最初の要素にスタイルを適用できる。

index.html
<body>
  <div>
    <p>1番目の要素</p>
    <p>2番目の要素</p>
  </div>
</body>
style.css
div p:first-child {
    font-weight: bold;
    color: green;
}

ブラウザ表示結果↓

last-child

last-childはある兄弟要素の最後の要素にスタイルを適用できる。

index.html
<body>
  <div>
    <p>1番目の要素</p>
    <p>2番目の要素</p>
    <p>最後の要素</p>
  </div>
</body>
style.css
div p:last-child {
    font-weight: bold;
    color: brown;
}

ブラウザ表示結果↓

hover

hoverはカーソルを要素の上を通過させたときにスタイルを適用できる。

index.html
<body>
  <h1>擬似クラス入門です。</h1>
</body>
style.css
h1:hover {
    color: red;
}

ブラウザ表示結果(マウスを文字の上に乗った時に変化)↓

linkはまだ訪問されていない要素にスタイルを適用できる。

index.html
<body>
  <a href="https://www.google.com/?hl=ja">Google</a>
</body>
style.css
a:link {
    color: gold;
}

ブラウザ表示結果↓

visited

visitedは訪問済みの要素にスタイルを適用できる。

index.html
<body>
  <a href="https://www.google.com/?hl=ja">Google</a>
</body>
style.css
a:visited {
    color: aqua;
}

ブラウザ表示結果↓

not

notは列挙されたセレクターに一致しない要素にスタイルを適用できる。

index.html
<body>
  <h1>h1の要素</h1>
  <p>pの要素</p>
  <p>pの要素</p>
  <h2>h2の要素</h2>
</body>
style.css
body:not(p) {
    color: orange;
}

ブラウザ表示結果↓

nth-child

nth-childは兄弟要素のグループの中での位置に基づいてスタイルを適用できる。

index.html
<body>
  <ol>
    <li>みかん</li>
    <li>りんご</li>
    <li>バナナ</li>
    <li>メロン</li>
    <li>いちご</li>
  </ol>
</body>
style.css
/* oddで奇数番目にスタイルが適用される */
ol li:nth-child(odd) {
    color: aquamarine;
}

/* cf.2n+1でも奇数番目にスタイルが適用される */
ol li:nth-child(2n+1) {
    color: aquamarine;
}

/* cf.evenで偶数番目にスタイルが適用される */
ol li:nth-child(even) {
    color: aquamarine;
}

/* cf.2nで偶数番目にスタイルが適用される */
ol li:nth-child(2n) {
    color: aquamarine;
}

ブラウザ表示結果↓

擬似クラスとしてよく使用するであろうものを紹介しました。
以下の公式サイトに他にも擬似クラスがありますので、詳しくはこちらをこ参照ください。

まとめ

  • 擬似要素
    • 要素の一部分にスタイルを適用できる
    • CSSでの指定時にコロンは2つ
  • 擬似クラス
    • 要素全体にスタイルを適用できる
    • CSSでの指定時にコロンは1つ

参考

Discussion