最終更新日：2022.05.23 [月]　公開日：2017.11.19 [日]　カテゴリー：html・CSS・jQuery・JS備忘

擬似クラスとてもよく使うので、備忘的にまとめます。

基本のhtmlベース

html

ここに説明文が入ります
 

 
リスト１
 
リスト１
 
リスト１
 
リスト１
 
リスト１
ここにまとめが入ります
 

【:first-child :last-child】要素内の最初の子要素と最後の子要素の指定

CSS

.test1 ul :first-child{
color:#00ff00;
}
.test1 ul :last-child{
color:#ff0000;
}

表示

【:nth-child(n)】親要素の中のn番目の子要素の指定

CSS

.test2 ul :nth-child(3){
color:#ff0000;
}

表示

【:nth-child(enev)】【:nth-child(odd)】親要素の中の偶数(even）奇数(odd)

CSS

.test3 ul :nth-child(even){
color:#0000ff;
}
.test3 ul :nth-child(odd){
color:#00ff00;
}

表示

【:nth-of-type(n)】指定した子要素の種類限定のn番目

CSS

/*test4の中のpタグの２番目を指定：赤色
今回の例だとpタグの2番目はラストのまとめの文章*/
.test4 p:nth-of-type(2){
color:#ff0000;
}
/*test4の中のliタグの２番目を指定：水色*/
.test4 li:nth-of-type(2){
color:#00ffff;
}
/*test4の中のliタグの最初を指定：黄色*/
.test4 li:first-of-type{
color:#ffcc00;
}
/*test4の中のliタグの最後を指定：ピンク*/
.test4 ul li:last-of-type{
color:#ff00ff;
}

表示

【:empty】空の要素を指定

CSS

.test5 li:empty{
background-color:#000;
}

表示

【:not】否定擬似クラス

CSS

/*ulの中の最後の要素以外を背景ピンクに*/
.test6 ul :not(:last-child){
background-color:#fae5fa;
}

表示

【::before】【::after】要素の前後にスタイルを当てる

CSS

.test7 p::before{
content:'■';
color:#f00;
}
.test7 li::after{
content:'新着';
color:#f00;
margin-left:20px;
font-size:10px;
}

表示