CSSの基本
schedule2022.10.24

【CSS】擬似要素の使い方と一覧

CSS

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on null in /home/c3494839/public_html/webpad.work/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

CSSには疑似要素と呼ばれる特殊なキーワードがあります。擬似クラスと同じような使い方ですが機能は別物として扱われています。

例えばよく使う疑似要素には「::before疑似要素」があります。

p::before{
    content:"★";
}

::before疑似要素はHTMLタグの先頭に追加で要素を追加できます。 擬似クラスと記述方法はほぼ同じですが、擬似クラスがコロン「:」１個に対して、疑似要素は「::」２個になります。

擬似クラスが気になる方は下記ページを参照してください。

【CSS】擬似クラスの一覧と使い方

擬似要素の一覧

動作が微妙だったりまだ本格的に動かないものは▲を表記しています。

また要素と書いているものはセレクタ名（CLASS名など）およびHTMLタグを指します。

::before指定要素の前に新たなインライン要素を作り出す
content:""の記述が必ず必要
::after指定要素の後に新たなインライン要素を作り出す
content:""の記述が必ず必要
::first-line指定要素の最初の行に指定
::first-letter指定要素の最初の行かつ最初の文字に指定
::backdrop要素が全画面モードになった場合に指定
::cueWebVTT（字幕やキャプションなど）を指定
::file-selector-button<input type=”file”>の内側のボタン部分を指定できます。
::markerliなどのリスト項目の●部分を指定
::placeholder<input>などに表示させられるプレイスホルダーを指定
::selection選択された要素を指定
※マウスでテキストを選択状態にした場合など
::target-textscroll-to-textで指定されたテキストを指定
※hrefに:~:text=○○○と記載する
▲::slotted()<template>内で利用する<slot>で機能する
▲::spelling-errorテスト段階。スペルミスがあると指定
▲::cue-regionテスト段階。::cueとほぼ同じ？
▲::grammar-errorテスト段階。文法の間違いがあれば指定
▲::part()<template>内で利用するpart=""で機能する
::part(abc) と指定すればpart="abc"を指定できる

擬似要素の使い方

::before

指定要素の前に新たなインライン要素（displayプロパティで変更可能）を作り出します。content:””の記述が必ず必要になるので注意してください。この疑似要素はかなり使い勝手がよく、今まで装飾のために追加していた空タグを無くせます。ボーダーを利用して吹き出しを作ったり、アイコンを登録して表示したりなど拡張性が高いです。

content:""は空でも利用できます。

h1::before{
  content:"★";
}

p::before{
  content:"＞";
  color:white;
  background:red;
  padding:6px;
  margin:0 8px 0 0;
}

See the Pen
::before by pecoegg (@pecoegg)
on CodePen.dark

::after

::beforeの逆バージョンです。指定要素の後に新たなインライン要素を作り出します。

ul{
  list-style:none;
}

li{
  display:inline;
}

li::after{
  content:">";
}

li:last-child::after{
  content:"";
}

See the Pen
::after by pecoegg (@pecoegg)
on CodePen.dark

::first-line

指定要素の最初の行に指定できます。この行とはHTMLのタグや<br>で改行することでは無く、要素の幅で改行されているテキストになります。

::first-line{
  background:red;
}

See the Pen
::first-line by pecoegg (@pecoegg)
on CodePen.dark

::first-letter

指定要素の最初の行かつ最初の文字に指定できます。

::first-letter{
  font-size:40px;
}

p + p::first-letter{
  color:red;
}

See the Pen
::first-letter by pecoegg (@pecoegg)
on CodePen.dark

::backdrop

要素が全画面モードになった場合に指定できます。

::backdrop{
  background:red;
}

See the Pen
::backdrop by pecoegg (@pecoegg)
on CodePen.dark

::cue

WebVTT（字幕やキャプションなど）を指定できます。

::cue {
  color:yellow;
  font-weight:bold;
}

::file-selector-button

<input type=”file”>の内側のボタン部分を指定できます。<input type="file">は見えているボタンの周囲のテキスト部分もボタンとして機能しています。そのためinput{CSSプロパティ}で指定してしまうとボタンデザイン以外の部分にもCSSが当たってしまいます。それを回避するために::file-selector-buttonを利用します。

.i01{
  border:2px solid red;
}

.i02::file-selector-button{
  border:2px solid red;
}

See the Pen
::file-selector-button by pecoegg (@pecoegg)
on CodePen.dark

::marker

liなどのリスト項目の●部分を指定できます。

::marker{
  color:red;
}

See the Pen
::marker by pecoegg (@pecoegg)
on CodePen.dark

::placeholder

<input>などに表示させられるプレイスホルダー（サンプル文字）を指定できます。

::placeholder{
  color:red;
}

See the Pen
::placeholder by pecoegg (@pecoegg)
on CodePen.dark

::selection

マウスなどで選択された要素を指定できます。iOSは非対応です。

::selection{
  background:red;
  color:white;
}

See the Pen
::selection by pecoegg (@pecoegg)
on CodePen.dark

::target-text

scroll-to-textで指定されたテキストを指定できます。scroll-to-textとはhref／URLに「:~:text=○○○」と記載することで指定できます。#がついていないと上手く動作しないようなので「#:~:text=○○○」とアンカーリンクのように扱います。対応ブラウザが微妙です。

＃テストリンク「テキスト」文言に色つけてみる

::target-text{
  background:yellow;
  text-decoration:underline;
}

See the Pen
::target-text by pecoegg (@pecoegg)
on CodePen.dark