CSS レッスン9
疑似クラス・疑似要素
:hover、:nth-child、::before、::afterで要素を柔軟にスタイリングしよう
疑似クラスと疑似要素の違い
疑似クラス（:）は要素の「状態」を、疑似要素（::）は要素の「一部」をスタイリングします：
:hover- マウスが乗っている時:focus- フォーカスされている時（入力欄など）:active- クリック中の状態:nth-child(n)- n番目の子要素を選択::before- 要素の前にコンテンツを挿入::after- 要素の後にコンテンツを挿入::placeholder- プレースホルダーのスタイル
状態を表す疑似クラス
:hover、:focus、:activeでユーザーの操作に反応するスタイルを作れます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
18 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
::beforeと::after
疑似要素を使うと、HTMLを追加せずに装飾的なコンテンツを挿入できます。contentプロパティが必須です。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
13 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
6 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。