CODEWITHSUNDEEP
htmlcsscontainers
Elio Briceño
Elio Briceño

Reputation: 63

Use a Common Class in several different classes

Im kinda confused about some div and tags usages. I know I can chain two classes with .class1.class2, that I can use .class1 h1 to select all h1 elements with class1 class, that p.class1 selects p elements with a class of class1 but I wanna use a class like button and use it in different div but I don't know how to differentiate in the CSS code.

.header {
  height: 222px;
  background-color: white;
  width: 100%;
}
.container {
  position: relative;
  text-align: center;
  top:50%;
  transform: translateY(-50%);
}

.container h1 {
  font-size: 48px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.container h2 {
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  font-weight: 200;
}
  <div class="header">
      <div class="container">
        <h1>jane bloglife</h1>
        <h2>Welcome to the world of Jane's world</h2>
      </div>
  </div>
  <div class="front-image">
    <div class="container">
      <h1>Jane's</h1>
      <h2>Fashion Blog</h2>
      <div class="button"> <a href="">suscribe</a></div>
      </div>
  </div>

I want to differentiate the elements with a container class that is inside the header class from the other container class that is inside the front-image class

Upvotes: 0

Views: 42

Answers (1)

Carl Binalla
Carl Binalla

Reputation: 5401

To style elements inside header, use this format .header > .container:

.header>.container h1 {
  font-size: 50;
  color: red;
}
<div class="header">
  <div class="container">
    <h1>jane bloglife</h1>
    <h2>Welcome to the world of Jane's world</h2>
  </div>
</div>
<div class="front-image">
  <div class="container">
    <h1>Jane's</h1>
    <h2>Fashion Blog</h2>
    <div class="button"> <a href="">suscribe</a></div>
  </div>
</div>

To style elements inside front-image, use this format .front-image > .container:

.front-image>.container h1 {
  font-size: 50;
  color: red;
}
<div class="header">
  <div class="container">
    <h1>jane bloglife</h1>
    <h2>Welcome to the world of Jane's world</h2>
  </div>
</div>
<div class="front-image">
  <div class="container">
    <h1>Jane's</h1>
    <h2>Fashion Blog</h2>
    <div class="button"> <a href="">suscribe</a></div>
  </div>
</div>

Upvotes: 1

Related Questions