CODEWITHSUNDEEP
csscss-selectors
Udzzzz
Udzzzz

Reputation: 155

How to select or give style to all the child under the parent

I have 1 parent and 3 childs, for example:

 <div class="container">
    <div class="header">Header</div>
    <div class="small-box-1">Small box 1</div>
    <div class="main-content">Main content</div>
</div>

I need to select all the child for background: red, without affecting the parent. Normally I can just select the child class with something like:

.header, .small-box-1, .main-content{background: red}

In sass, I can use something like this: 

& > * {background: red}

So it selects all the child under the parent.

I'm wondering if we can do that just using css? so I don't need to repeat the classes to define the background: red

Upvotes: 0

Views: 51

Answers (3)

Harsh Shah
Harsh Shah

Reputation: 188

should try something like this:

div.container > div {
  background-color: red;
}

Upvotes: 0

Jair Reina
Jair Reina

Reputation: 2915

SASS is just a CSS pre-processor so everything you write in SASS will eventually be compiled to CSS.

With that said, if you do this in SASS:

.container {
  & > * {
    background: red;
  }
}

it will be converted to this CSS code:

.container > * {
  background: red;
}

So you should be able to use that CSS code.

Thanks,

Upvotes: 1

user10077398
user10077398

Reputation:

try somethings like this :


/* Select all direct child "div" of the parent ".container" */

.container > div
{
   background-color: red;
}

Upvotes: 0

Related Questions