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

Question

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.

Answer 1

You have to use this:

.main_wrapper > h1{
   color:blue;
}

.question_wrapper > h1{
   color:red;
}

> means direct child of whats' before >