Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8655

cssの擬似要素についてまとめてみる

$
0
0

はじめに

この記事は駆け出しエンジニアの第一歩! Advent Calendar 2020の20日目の記事です

CSSでよく出てくる擬似要素についてまとめます

自分のメモがあふれてきたのでここでまとめていきたいと思います
セレクタ・改行などは雑です

before & after

セレクタの直前直後に要素を作り出す
セレクタの外側に作られるというよりも子要素的な役割になる

hoge.html
<h1>Hello world</h1>

要素の直前に反映させたいならbefore、直後に反映させたいならafterを書く

hoge.css
h1::before(after){content:'!!!'}

出力 (今回はafter)
スクリーンショット 2020-12-20 22.43.07.png
わざわざhtmlにタグやらclass,idなどを付けなくても「!!!」が反映されました
content:''のように空っぽにしても問題ありません
before afterを使いこなせばレイアウトの幅が広がりますね

child

hoge.html
<li>1</li><li>2</li><!-- 省略1〜5までのリスト -->
hoge.css
/* 最初の要素 */li:first-child{color:red}/* n個目の要素(今回3個目) */li:nth-child(3){color:blue}/*最後の要素*/li:last-child{font-size:50px}

こんな感じになりました

スクリーンショット 2020-12-20 22.56.21.png
***nth-child()の()にodd(奇数)even(偶数)も指定できます

場所指定

hoge.css
/* X番目〜(今回は3番目〜) */li:nth-child(n+3){color:blue}

スクリーンショット 2020-12-20 22.58.45.png

hoge.css
/* 〜X番目(今回は〜3番目) */li:nth-child(-n+3){color:red}

スクリーンショット 2020-12-20 23.00.35.png

hoge.css
/* X番目〜X番目(今回は2番目〜4番目) */li:nth-child(n+2):nth-child(-n+4){border-bottom:2pxsolidgreen}

スクリーンショット 2020-12-20 23.02.59.png

その他

hoge.html
<p>
   hoge hoge hoge hoge hoge
   hoge hoge hoge hoge hoge
</p>
hoge.css
/*最初の1文字を指定*/p::first-letter{font-size:30px;}

スクリーンショット 2020-12-20 23.12.57.png

hoge.css
/*最初の1文字を指定*/p::first-line{font-size:30px;}

スクリーンショット 2020-12-20 23.14.31.png

まとめ

before/afterの擬似要素をまとめていたら関連メモが出てきました
擬似要素によって[:]の数が異なるので注意ですね
擬似要素をどんどん取り入れていってレイアウトの幅を広げたいです( ˊ̱˂˃ˋ̱ )
使い方をマスターして次はその記事などを書けるようになりたいですね
ありがとうございました


Viewing all articles
Browse latest Browse all 8655

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>