19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

今更ですが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

19
14
1

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
  3. You can use dark theme
What you can do with signing up
19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?