【CSS3】子孫セレクタを理解する

2018年5月3日2023年1月22日

段落１

段落２

段落３

段落４

段落５

段落６

段落７

段落８

<body>
    <p>段落１</p>
    <p>段落２</p>
    <div id="div1" class="divclass">
        <p>段落３</p>
        <p>段落４</p>
    </div>
    <p>段落５</p>
    <p>段落６</p>
    <div id="div2" class="divclass">
        <p>段落７</p>
        <p>段落８</p>
    </div>
</body>

/*①body要素内のすべてのp要素に対して適用。*/
body p{font-weight : bold; }

/*②body要素内でID名が"div1"に紐づくすべての要素に対して適用。※①を継承する。*/
body #div1{color: red; }

/*③body要素内でID名が"div2"に紐づくすべての要素の内、最後の要素に対して適用。※①を継承する。*/
body #div2 :last-child{color: blue;}

/*④body要素内でclass名が"divclass"に紐づくすべての要素に対して適用。※①②③を継承する。*/
body .divclass{color: green;}