0
0

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 1 year has passed since last update.

CSSの擬似要素・擬似クラス

Last updated at Posted at 2024-01-18

CSSの擬似要素

::first-letter

要素の1文字目を指定
1文字目だけにスタイルを適応させたい場合

::first-line

要素の1行目を指定
1行目だけにスタイルを適応させたい場合

::before

要素の直前にコンテンツを追加
記載しているHTMLの前部分にスタイルを適応させる

::after

要素の直後にコンテンツを追加
記載しているHTMLの後部分にスタイルを適応させる

CSSの擬似クラス

:hover

マウスが重なっている状態のみスタイルが適応される

:active

マウスがクリックされている状態のみスタイルが適応される

:focus

マウスがフォーム要素などにフォーカスが当てられた状態のみスタイルが適応される

:link

aタグに対してリンク未訪問の場合のみスタイルが適応される

:first-child

親要素の最初の子要素だけがスタイル適応される

:nth-child()

親要素の() 内の子要素番号だけがスタイル適応される

:nth-of-type()

親要素と同じ種類の() 内の子要素番号だけがスタイル適応される

:not()

親要素の()内の要素以外にスタイルが適応される

0
0
0

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?