【HTML/CSS】擬似要素・擬似クラス
こんにちは😊Kintarouです。
現在エンジニア転職を目指してTECH CAMPにてプログラミング学習中です👨🎓
夢はフリーランスエンジニアになって働く人が働きやすいシステムを作ること！
と、愛する妻と海外移住すること🗽
プログラミングや読んでいる本のことなど、ブログに書いていきます！
twitter : https://twitter.com/ryosuke_angry
今日はビューの作成を行っていたのでCSSの擬似要素についてまとめます。
参考にさせて頂いたサイト🙇♂️
www.asobou.co.jp
擬似要素とは
上記のように、HTML要素の一部を”擬似的に別要素とみなして”、もしくは”擬似的に別要素を追加して”CSSの装飾を適用させるセレクタのことです。
擬似要素を使わない場合上記のようにしようとすると
<h1><span>U</span>ser Name</h1>
h1 span{ color: red; }
とする必要がありますが、擬似要素を使うことで
<h1>User Name</h1>
h1::first-letter{ color: red; }
と記述することで同様の効果が得られます。
こちらの方がHTMLのコードを触ることなく装飾させることが出来るので保守性も高そうです。
主な擬似要素
セレクタの後に以下の擬似要素を付けると指定できます。
| 擬似要素 | 適用範囲 |
|---|---|
| ::first-letter | 要素の１文字目にスタイルを適用 |
| ::first-line | 要素の1行目にスタイルを適用 |
| ::before | 要素の直前にコンテンツを追加 |
| ::after | 要素の直後にコンテンツを追加 |
擬似要素を応用して要素の左右に線を入れる
擬似要素の::beforeと::afterを使って、要素の前後に線を入れ、画像のようなデザインにします。
まずはHTML要素にクラス名を付けます。
<span class="border">border</span>
続いてCSSを記述します。ポイントはflexboxにした要素を”垂直方向の真ん中”に揃えることだそうです。
.border { display: flex; align-items: center; } .border:before, .border:after { content: ""; height: 1px; flex-grow: 1; background-color: #666; } .border:before { margin-right: 1rem; } .border:after { margin-left: 1rem; }
::beforeと::afterで要素の前後に""(空)要素を追加し、flex-grow: 1;にすることでフレックスアイテムの伸び率を横幅いっぱいにしています。
後のmargin-right(left): 1rem; は文字と横線の間隔を調整しているそうです。
擬似クラスとは
指定の要素が"特定の状態の場合に"CSSの装飾を適用させるセレクタです。
例えば「マウスを要素にホバーした時」や「親要素のn番目の要素」にスタイルを適用させます。
※画像は::nth-of-type(n)を使った場合
仮に下記のようなHTML要素があったとして...
<div> <p>1番目のpタグ</p> <p>2番目のpタグ</p> <p>3番目のpタグ</p> <p>4番目のpタグ</p> </div>
CSSに下記のように記述すれば再現できます。
div p:nth-of-type(3){ color: red ; }
主な擬似クラス
| 擬似クラス | 適用範囲 |
|---|---|
| :link | 未訪問の状態のaタグにスタイルを適用 |
| :hover | 要素にマウスがホバーした際にスタイルを適用 |
| :active | 要素がアクティブになった際にスタイルを適用 |
| :first-child | 親要素内の最初の子要素にスタイルを適用 |
| :last-child | 親要素内の最後の子要素にスタイルを適用 |
| :nth-child(n) | 親要素内のn番目の要素にスタイルを適用 |
| :nth-of-type(n) | 親要素内の同じ種類の要素中のn番目の要素にスタイルを適用 |
| :not(X) | 親要素内のX以外の要素にスタイルを適用 |
擬似要素は「::」ですが、擬似クラスは「:」な点にご注意ください！
以上、どなたかの参考になれば幸いです😊
