ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

疑似セレクタとは?

疑似セレクタについて

CSSでは様々な表現ができますが、疑似セレクタを使うことにより、より複雑でリッチな表現が可能となります。

疑似セレクタとは「疑似クラス」と「疑似要素」の総称で、セレクタの後ろに記述することにより効果を発揮します。

擬似セレクタについて

疑似クラスについて

疑似クラスとは、「特定のスタイルの、子セレクタのみにスタイルを適用したい」場合に利用されます。

例えば、「覚えておきたいCSSの一覧」の、「リンク色の変更と装飾」で学習した「a:link」「a:visited」「a:hover」「a:active」なども、疑似クラスに分類されます。

疑似要素

疑似要素は、例えば「このテキストの1行目にだけ、スタイルを適用したい」といった、より狭い範囲にスタイルを適用する場合に利用されます。

主な疑似要素として、「:first-line」や「:first-letter」「:before、:after」などがあります。

疑似セレクタの記述方法

疑似セレクタを使うには、セレクタに続いて疑似セレクタを記述します。

[CSSの記述例]
p:first-child {  ← セレクタに続き、疑似セレクタを入力
color:#F00;
}

セレクタ(p)に続き、:first-childの疑似セレクタを入力します。
これにより、疑似セレクタの様々な効果を得ることができます。

覚えておきたいポイント

なにかと便利な擬似セレクタ

疑似セレクタを使えば、より複雑で動きのあるページや文字表現が可能です。
ちなみに、さきちんWEBでも擬似セレクタを使って画像の説明書きを表示しています。

:first-childの利用
« 前のページへ 【STEP.6】疑似セレクタの利用

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。