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～）