頭脳一式

人の記憶なんて曖昧なもの。すべての情報を頭に記憶するなんてナンセンス。困ったらここに来ればいいじゃん?というスタンスで最強のナレッジベースを目指すブログ

【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名が"divlass"に紐づくすべての要素に対して適用。※①②③を継承する。*/
body .divclass{color: green;}