よく使うけど、いつもググってるので、まとめました。
3番目のみ
style.scss
li:nth-child(3){margin-bottom:20px;}2の倍数のみ
style.scss
:nth-child(2n)奇数
style.scss
:nth-child(odd):nth-child(2n+1)偶数
style.scss
:nth-child(even):nth-child(2n)最後以外
style.scss
li:not(:last-child){margin-bottom:20px;}最初と最後のみ
style.scss
.wrap>li:first-of-type,.wrap>li:last-of-type{margin-bottom:20px;}最初と最後以外
style.scss
.wrap>li:nth-child(n+2):nth-last-child(n+2){margin-bottom:20px;}最後の要素以外に擬似要素
style.scss
div>span:not(:last-child):after{content:",";}pタグの直前後にulがある時のみ適応(隣接関係)
style.scss
p+ul{margin-top:50px;}pタグの直後にある要素がulタグじゃなかった場合はstyleが指定されない
親要素の直接の子要素飲みに適応(親子関係)
style.scss
p>ul{margin-top:50px;}.main と .textどっちのclassも持ってる要素を指定
style.scss
.main{&.text{margin-top:50px;}}単純にclass名の追加→.main_textを指定
style.scss
.main{&_text{margin-top:50px;}}target="_blank"のついた要素にstyleを指定
style.scss
.buttona[target="_blank"]::after{}ちなみに、タグに「target=”_blank”」を付与する場合「rel=”noopener”」を付けた方がいいらしい。
classを持ってないpタグを指定
style.scss
p:not([class]){}divタグ配下の全ての要素にstyleを適応
style.scss
div*{margin:10px;}