search
LoginSignup
12

More than 3 years have passed since last update.

posted at

Organization

CSS疑似要素、疑似クラスのコロンの数。1つ2つの違い

今更ですがCSSのコロン2つ付ける場合の
定義を明確にまとめてみました。
なんとなくでなく、わかって使うようにしたい。

回答:疑似クラスは「:」、疑似要素は「::」

CSS3より擬似クラスと疑似要素でコロンの記述が変更となった。
ブラウザではコロン1つでもエラーにならない。

疑似クラス 一覧

コロン1つ「:」を記述する。

:active
:checked
:default
:defined
:disabled
:drop 
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:host
:host()
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:matches() 
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown 
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

2018/12/24現在 実験中の擬似クラスは除く

疑似要素 一覧

コロン2つ「::」を記述する。

::after (:after)
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::selection
::slotted()

2018/12/24現在 実験中の擬似要素は除く

参考

CSSの擬似要素と擬似クラスの違いを明確に – YATのblog
https://wp.yat-net.com/?p=4505

CSSの:afterと::afterどっちが正しい? 疑似クラスとか疑似要素って何? | 初代編集長ブログ―安田英久 | Web担当者Forum
https://webtan.impress.co.jp/e/2015/12/08/21670

疑似要素 (Pseudo-elements) | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

疑似クラス | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
12