セレクタ&コンビナータの使用



■二重螺目
p
担当研究員:松原茂

    <header>
      <h1>My Upcoming Challenges</h1>
      <p id="description">These are my goals for the next days</p>
      <a href="index.html">View Today's Challenge</a>
    </header>
id="description"
#description {
    margin-bottom: 36px;
}

全く同じ結果( IDなし)
header p {
  margin-bottom: 36px;
}

メインセクションのすべてのパラグラフを変更する
<main>
      <ol>
        <li>
          <h2>Tuesday, April 2nd</h2>
          <p>Repeat what I learned about HTML & CSS</p>
        </li>
        <li>
          <h2>Wednesday, April 3rd</h2>
          <p>Do the exercises on HTML & CSS</p>
        </li>
        <li>
          <h2>Thursday, April 4th</h2>
          <p>Dive deeper into HTML & CSS and build more complex websites</p>
        </li>
        <li>
          <h2>Friday, April 5th</h2>
          <p>Practice advanced HTML & CSS concepts</p>
        </li>
      </ol>
    </main>
main p {
    margin: 12px;
    color: rgb(71, 29, 22);
}