Select only direct children from the item with Sass

Question

Let's say I have the following html:

<header class="header"> <div class="title"> <h1>Home</h1> </div> <div class="logo"> <img src="#" alt="Logo"> </div> <div class="account"> <div class="options"> </div> <div class="search"> </div> </div> </header> 

And I have the following SCSS:

 header { height: 4.1rem; div { width: 33%; float: left; height: 4.1rem; line-height: 4.1rem; color: #fff; &.title { h1 { font-weight: normal; font-size: 3rem; padding: 0; margin: 0; } } &.logo { text-align: center; } &.account { } } } 

Now the problem is that the divs options and search make up 33% of account , which is logical since I have div {width: 33%} . I know that I can select direct children with:

 header { > div { } } 

But this does not help, even if I put > infront of all other classes. I also know that I can say that the width should be 0 or something again in .account , but I would like to prevent this.

Answer 1

Try the following:

  ... & > div {width: 33%;} div { float: left; height: 4.1rem; line-height: 4.1rem; color: #fff; ... 

Take out the width of the div and apply it only to straight children. Leave the rest as it is. Here's a quick fiddle (remove the .option and .search later, just for visualization).

Please edit your question and explain better what exactly you want to achieve.

Answer 2

I'm not sure I understand you. But I think you need a combination of direct children and child pseudo selectors, in pure CSS:

 header > div:first-child { } 

Or, for the second div:

 header > div:nth-child(2) { } 

You can also use the not selector:

 header > div:not(.account) { } 

to exclude any unwanted divs.