DEV Community

MoonLight
MoonLight

Posted on

Using Selectors & Combinators

Image description
بطور مشترک روی همه ی
pها
اثر میزاره
Image description

    <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>
Enter fullscreen mode Exit fullscreen mode

id="description"

#description {
    margin-bottom: 36px;
}
Enter fullscreen mode Exit fullscreen mode

Image description

exactly the same result (without the ID):

header p {
  margin-bottom: 36px;
}
Enter fullscreen mode Exit fullscreen mode

change all paragraph(p) in main section

<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>
Enter fullscreen mode Exit fullscreen mode
main p {
    margin: 12px;
    color: rgb(71, 29, 22);
}
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)