Webエンジニア学習日記 CSS編 #08 「疑似要素と疑似クラス」

2023/05/10

CSS プログラミング 学習

t f B! P L
eyecatch css独自の機能で唯一DOM構造に影響を及ぼすのが、疑似要素です。 同じ様に、Javascriptの様な操作ができる擬似クラスというのもあり、 この2つの機能を使いこなせるようになると、かなり効率的にcssを使いこなせるようになります。 逆にこの疑似要素と疑似クラスをちゃんと理解できないと、cssについては理解するのが難しくなるでしょう。

疑似要素

名前から分かる通り、擬似的にHTMLタグを追加します。 HTMLタグと言っても、divやspanというタグが追加されるわけではなく、名称の内タグが、指定のタグに中に追加されます。 ちなみに、リファレンスサイトに書かれている説明は次の通りです。
CSS の 擬似要素 (Pseudo-elements) は、 セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。 出典 : https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
なんだか、説明だけ聞いてもよく判りませんね。 プログラミングもそうですが、cssも、実際にコードを自分で書いて表示や結果を目で見て確認して初めて理解できるモノです。

書き方

疑似要素は、セレクタに:(コロン)を2つ付けて疑似要素

::before

要素の中の先頭に、任意の要素を追加できます。 beforeで文字を追加するサンプル <p>タイトル</p> <style> p::before{ content:'[sample] '; } </style>
タイトル

::after

beforeと比較するとわかりやすいと思いますが、要素の後方に任意の要素を追加できます。 (インライン)ブロック要素追加するサンプル <p>タイトル</p> <style> p::after{ content:''; display:inline-block; width:20px; height:20px; background-color:red; } </style>
タイトル

::first-line

文章の先頭行のスタイルだけを変更させることができます。 <p>文章サンプル むかしむかしあるところに、おじいさんとおばあさんが暮らしていました。 おじいさんは、山へ芝刈りに おばあさんは、川へ洗濯をしに行きました。</p> <style> p::first-line{ color:red; } </style>
文章サンプル むかしむかしあるところに、おじいさんとおばあさんが暮らしていました。 おじいさんは、山へ芝刈りに おばあさんは、川へ洗濯をしに行きました。

::first-letter

文章の先頭文字のスタイルだけを変更させることができます。 <p>タイトル</p> <style> p::first-letter{ color:red; font-weight:bold; font-size:1.2em; } </style>
タイトル

::selection

文章の選択をした箇所のみのスタイルを変更する命令です。 <div>文章サンプル むかしむかしあるところに、おじいさんとおばあさんが暮らしていました。 おじいさんは、山へ芝刈りに おばあさんは、川へ洗濯をしに行きました。</div> <style> div::selection{ background-color:red; color:white; } </style> ※文字を選択してください。
文章サンプル むかしむかしあるところに、おじいさんとおばあさんが暮らしていました。 おじいさんは、山へ芝刈りに おばあさんは、川へ洗濯をしに行きました。

ポイント

疑似要素は、cssの古いバージョンでは、:(コロン)が1つのみの記載でしたが、css3より:(コロン)を2つ付けるようになりました。 :(コロン)1つでもエラーも出ないし、ちゃんと表示されますが、擬似クラスとの分別の為に仕様が定義されたので、今後表示されなくなる可能性があるので、正規の書き方に従ったほうがいいでしょう。 そして、他にもたくさんの疑似要素がありますが、現時点でよく使うのは、上記の5つです。

擬似クラス

擬似クラスは、疑似要素とは、名称は似ているけど、役割はまるで違います。
CSS の擬似クラス (pseudo-classes) は、 セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。 出典 : https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
わかりやすく言うと、セレクタで選択されたタグの、さらに特定の状態を追加で指定できる機能です。 よく使う命令を見て理解していきましょう。

:hover

タグの上にマウスが乗っかった時にスタイルを変更できます。 <p class='class-1'>[sample] hover</p> <style> .class-1{ color : blue; } .class-1:hover{ color : red; } </style>
[sample] hover

:active

マウスがクリックされている状態の時にスタイルを変更できます。 <p class='class-2'>[sample] active</p> <style> .class-2{ color : blue; } .class-2:active{ color : red; } </style>
[sample] active

:link

AタグにセットされているURLで、まだ訪問していない時のスタイルがセットできます。 <a class='class-3' href='https://example.com/'>https://example.com/</a> <style> a.class-3:link{ background-color:blue; color:white !important; padding:10px; } </style>
https://example.com/

:visited

AタグにセットされているURLで、すでに訪問した事がある時のスタイルがセットできます。 <a class='class-4' href='https://blog.myntinc.com/'>https://blog.myntinc.com/</a> <style> a.class-4:visited{ background-color:red; color:white !important; padding:10px; } </style>
https://example.com/

:target

開いているURLにアンカーリンクがセットされている時に、それに該当するID値(name値)がセットされている場合に、スタイルがセットできます。 <div id='sample' class='class-5'>id=sample要素</div><style> a.class-5:target{ background-color:green; color:white !important; padding:10px; } </style>
id=sample要素

:checked

inputタグのtype="checkbox"の場合に、チェックされている場合のスタイルをセットできます。 ハンバーガーメニューなどでよく使われます。 <label class='class-6'> <input type='checkbox'> <div>チェックされたら装飾が変わります。</div> </label><style> .class-6{ display:block; padding:10px; border:1px dashed black; } .class-6 input[type='checkbox']:checked + *{ background-color:orange; color:white; } </style>

他にもあるよ

擬似クラスは、本当にたくさんあるので、こんなことできるかな〜と思って調べると出来てしまうことが多いでしょう。 ちなみに、自分は次のような擬似クラスをよく使います。
:empty (要素の中身が空の場合) :disabled (disable属性がセットされている場合) :root (htmlタグの事) :nth-childと、:nth-of-type (子階層を数値や計算式で指定できます) :first-child (子階層の1番目) :last-child (子階層の最後)
※子階層を操作する:nth-of-typeや:nth-childは、非常にパワフルな機能なので、別の回で詳細を解説したいと思います。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ