css - Select only direct children from element with Sass

Question

Lets 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 that I have is that divs options and search are 33% percent of account which is logic as I have div {width: 33%}. I know I can select direct child elements with:

header {
  > div {
  }
}

But this doesn't help even if I put the > infront of all other classes. I also know I can say that the width should be 0 or what ever again in .account but I would like to prevent this.

question from:https://stackoverflow.com/questions/30290820/select-only-direct-children-from-element-with-sass

Answer 1

Try this:

    ...
    & > div {width: 33%;}

    div {
      float: left;
      height: 4.1rem;
      line-height: 4.1rem;
      color: #fff;
      ...

Take out div width and apply it only on direct children. Leave rest as is. Here is quick fiddle (remove .option and .search styles later, its only for visualisation).

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