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.

Unlive

What does this have to do with Sass? If you have a pure CSS problem, only post the compiled CSS. – Scholar

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.

Ronda

the ampersand is unnecessary, it compiles to the same thing without it. css-tricks.com/the-sass-ampersand – Adamsun

Answer 2

Use the & with > inside the parent element like this:

.services {
    & > div {
        margin-bottom: 25px;
    }
}

Cervantez

the ampersand is unnecessary css-tricks.com/the-sass-ampersand – Adamsun

Answer 3

I am not certain I understand you. But I think you want 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 could also use the not selector:

header > div:not(.account) {
}

to exclude any unwanted div's.

Redundant

These aren't really working for me. Option 1 would only work for .title. Option 2 It doesn't apply for second div. Option 3 this would not apply certain style under div – Unlive

Or, perhaps: header > div, header > div > div {}? – Redundant

Turns out header > div {} was what you wanted, I'm not sure how you applied it, but that would be the same as the answer you accepted. – Redundant

Answer 4

:scope also works.
Just prepend :scope to your < direct descendant selector.

header {
  :scope > div {
    // styles
  }
}

Gibbeon