CSS 階層構造で子セレクタを指定するサンプル
環境
Google Chrome 111.0.5563.111(Official Build) (64 ビット)
Windows 10 Home 64bit
書式
セレクタ1 > セレクタ2
セレクタを>で区切って並べた場合、子セレクタになります。 セレクタ1を親として、子のセレクタ2の要素が対象になります。
使用例
<!DOCTYPE html> <html> <head> <style> .cft > .pA { color: blue; } </style> </head> <body> <div class="cft"> <p class="pA">test 123</p> </div> <div class="cft"> <div class="test"> <p class="pA">test 456</p> </div> </div> </body> </html>
実行結果
要素「.cft」の子(.pA)のためCSS(文字が青)が適用されます。