CSS 子結合子(子セレクタ)のサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
セレクタ1 > セレクタ2
セレクタ1を親として、子のセレクタ2の要素が対象になります。 セレクタを>で区切って並べた場合、子セレクタになります。 子結合子 (child combinator) (>) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。
使用例
<!DOCTYPE html> <html> <head> <style> /*子セレクタの指定*/ .city > .pB { color:red; background-color:skyblue; } </style> </head> <body> <div class="cft"> <p class="pA">tokyo</p> </div> <div class="cft"> <div class="city"> 555 <p class="pB">oosaka</p> </div> </div> </body> </html>
結果
文字「oosaka」の文字色(red)、背景色(skyblue)になります。