【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

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

段落1

段落2

段落3

段落4

段落5

段落6

段落7

段落8

<body>
    <p>段落1</p>
    <p>段落2</p>
    <div id="div1" class="divclass">
        <p>段落3</p>
        <p>段落4</p>
    </div>
    <p>段落5</p>
    <p>段落6</p>
    <div id="div2" class="divclass">
        <p>段落7</p>
        <p>段落8</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;}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です