CSS　子結合子(子セレクタ)のサンプル

2022年11月7日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
セレクタ1 > セレクタ2

セレクタ1を親として、子のセレクタ2の要素が対象になります。

セレクタを>で区切って並べた場合、子セレクタになります。

子結合子 (child combinator) (>) は 2 つの CSS セレクターの間に配置されます。

2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。

セレクタ1を親として、子のセレクタ2の要素が対象になります。セレクタを>で区切って並べた場合、子セレクタになります。子結合子 (child combinator) (>) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。

セレクタ1を親として、子のセレクタ2の要素が対象になります。
セレクタを>で区切って並べた場合、子セレクタになります。
子結合子 (child combinator) (>) は 2 つの CSS セレクターの間に配置されます。
2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。

使用例

<!DOCTYPE html>

<html>

<head>

<style>

/*子セレクタの指定*/

.city > .pB {

color:red;

background-color:skyblue;

}

</style>

</head>

<body>

<p class="pA">tokyo</p>

</div>

<div class="city"> 555

<p class="pB">oosaka</p>

</div>

</body>

</html>

<!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>

<!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)になります。

CSS

Posted by arkgame

関連投稿: