CODEWITHSUNDEEP
htmlcssstylesheet
slister
slister

Reputation: 789

How do I Have Different Header Rules For Elements In CSS Class

Okay so this is kind of hard to explain; therefore, it is also hard to search for, so I am just going to ask here.

Basically I have a CSS class that I am applying to certain DIVs. Within each class I would like to have rules that apply to certain selectors only in that DIV

For example let's say I have a CSS class like this

  .main_wrapper {
        text-align: center;

        h1
    {
        color: blue;
    }

    }

    .question_wrapper  {
        text-align: left;

        h1
    {
        color: red;
    }
    }

And then let's say I had HTML like this

<div class="main_wrapper">

    <h1>Test 1</h1>

    <div class="question_wrapper">

        <h1>Test 2</h1>

    </div>

</div>

What I would like to accomplish with CSS is have the h1 tag in the main_wrapper div be blue and the h1 tag in question_wrapper be red.

I know that the CSS I have here doesn't work but that is essentially what I am trying to accomplish.

I hope this makes sense.

If anybody has any ideas that would be great.

Upvotes: 0

Views: 214

Answers (3)

Paulie_D
Paulie_D

Reputation: 114991

If this is your SCSS

 .main_wrapper {
        text-align: center;

        h1
    {
        color: blue;
    }

    }

    .question_wrapper  {
        text-align: left;

        h1
    {
        color: red;
    }
    }

this would be your CSS

.main_wrapper {
  text-align: center;
}
.main_wrapper h1 {
  color: blue;
}

.question_wrapper {
  text-align: left;
}
.question_wrapper h1 {
  color: red;
}

...and it would work.

Sassmeister Gist Demo

Upvotes: 1

Santosh Achari
Santosh Achari

Reputation: 3006

You can use '>' operator for selecting child elements.

.main_wrapper > h1 {
color: blue;
}

.question_wrapper > h1{
color:red;
}

Upvotes: 1

Amit Joki
Amit Joki

Reputation: 59232

You have to use this:

.main_wrapper > h1{
   color:blue;
}

.question_wrapper > h1{
   color:red;
}

> means direct child of whats' before >

Upvotes: 3

Related Questions