Help me with multiple selectors

hi I just can’t understand why I have to use multiple selectors can anyone explain that to me with this challenge as an example. also, can anyone tell me why header and footer have been so used as selectors

<style>
body {
  font-family: Arial, sans-serif;
}
header {

}
header .profile-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}
header .profile-name {

  margin-left: 10px;
}
header .follow-btn {

  margin: 0 0 0 auto;
}
header .follow-btn button {
  border: 0;
  border-radius: 3px;
  padding: 5px;
}
header h3, header h4 {

  margin: 0;
}
#inner p {
  margin-bottom: 10px;
  font-size: 20px;
}
#inner hr {
  margin: 20px 0;
  border-style: solid;
  opacity: 0.1;
}
footer {

}
footer .stats {

  font-size: 15px;
}
footer .stats strong {
  font-size: 18px;
}
footer .stats .likes {
  margin-left: 10px;
}
footer .cta {
  margin-left: auto;
}
footer .cta button {
  border: 0;
  background: transparent;
}
</style>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
  <h3>Quincy Larson</h3>
  <h4>@ossia</h4>
</div>
<div class="follow-btn">
  <button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
  <div class="Retweets">
    <strong>107</strong> Retweets
  </div>
  <div class="likes">
    <strong>431</strong> Likes
  </div>
</div>
<div class="cta">
  <button class="share-btn">Share</button>
  <button class="retweet-btn">Retweet</button>
  <button class="like-btn">Like</button>
</div>
</footer>




      **Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36</code>

**Challenge:**  Add Flex Superpowers to the Tweet Embed

**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed

It allows you to be more specific. You may want to use the .profile-name class in more places than the header - maybe you always want it to be purple or something - but you don’t always want it to have ten pixels of left padding. You only want that inside the header.

1 Like

so for example if we do this :

header h1 h2 {
font-size: 16px;
}

we specify that we just want to give font size to that h1 and **h2 **who are in the header and not other h1 and h2 who are on this page. yes?

and tell me another thing what is the difference of this :

header h1,  header h2 {
font-size: 16px;
}

with the code above
what does that comma (,) do?

This would be an h2 inside a h1 inside a header.

This would be a h1 inside a header or a h2 inside a header.

I almost understand it now really thank you for your time

Good luck and happy coding!

1 Like