CSS 結合子いろいろ

CSS 結合子いろいろ
main * {
    color: red;
}
mainの中のすべての要素に適用

 

main h1 {
    color: red;
}
mainの下にあるh1すべてに適用

 

main article h1 {
    color: red;
}
mainの下にあるarticleの下のh1に適用

 

main > h1 {
    color: red;
}
main直下のh1にだけ適用

 

article > p + p  {
    color: red;
}
articleの下について、pの次のpから適用
(article直下にpが3つある場合、2つ目のpから適用)

 

article > p + p  {
    margin-top: 40px; 
}
articleの下について、pの次のpからマージントップを40pxに設定
(article直下にpが3つある場合、2つ目のpから適用)

 

article h1 ~ p  {
    color: red; 
}
articleの下について、h1より後ろのpに適用

参考にしたYouTube (21:51~)

CSSカテゴリの最新記事