【CSS3】子孫セレクタを理解する
段落１
段落２
段落３
段落４
段落５
段落６
段落７
段落８
<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;}以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！