はじめに
この記事は駆け出しエンジニアの第一歩！ Advent Calendar 2020の２０日目の記事です
CSSでよく出てくる擬似要素についてまとめます
自分のメモがあふれてきたのでここでまとめていきたいと思います
セレクタ・改行などは雑です
before & after
セレクタの直前直後に要素を作り出す
セレクタの外側に作られるというよりも子要素的な役割になる
hoge.html
<h1>Hello world</h1>要素の直前に反映させたいならbefore、直後に反映させたいならafterを書く
hoge.css
h1::before(after){content:'!!!'}出力 (今回はafter)
わざわざhtmlにタグやらclass,idなどを付けなくても「！！！」が反映されました
content:''のように空っぽにしても問題ありません
before afterを使いこなせばレイアウトの幅が広がりますね
child
hoge.html
<li>1</li><li>2</li><!-- 省略１〜５までのリスト -->hoge.css
/* 最初の要素 */li:first-child{color:red}/* n個目の要素(今回３個目） */li:nth-child(3){color:blue}/*最後の要素*/li:last-child{font-size:50px}こんな感じになりました
＊＊＊nth-child()の()にodd(奇数)even(偶数)も指定できます
場所指定
hoge.css
/* X番目〜(今回は３番目〜) */li:nth-child(n+3){color:blue}
hoge.css
/* 〜X番目(今回は〜３番目) */li:nth-child(-n+3){color:red}
hoge.css
/* X番目〜X番目(今回は2番目〜4番目) */li:nth-child(n+2):nth-child(-n+4){border-bottom:2pxsolidgreen}
その他
hoge.html
<p>
hoge hoge hoge hoge hoge
hoge hoge hoge hoge hoge
</p>hoge.css
/*最初の1文字を指定*/p::first-letter{font-size:30px;}
hoge.css
/*最初の1文字を指定*/p::first-line{font-size:30px;}
まとめ
before/afterの擬似要素をまとめていたら関連メモが出てきました
擬似要素によって[:]の数が異なるので注意ですね
擬似要素をどんどん取り入れていってレイアウトの幅を広げたいです( ˊ̱˂˃ˋ̱ )
使い方をマスターして次はその記事などを書けるようになりたいですね
ありがとうございました