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.

What does this have to do with Sass? If you have a pure CSS problem, only post the compiled CSS. — cimmanon, May 17 '15 at 18:56
@JosefEngelfrost That makes the `.options` and `.search` 100% width. I was hoping to get it 0 width — SuperDJ, May 17 '15 at 19:01

Drops · Accepted Answer · 2015-05-19T09:41:44.173

88

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.

edited May 19 '15 at 09:41

answered May 17 '15 at 19:26

Drops

2,680
18
16

Ty that fixed it for me and is still clean looking – SuperDJ May 18 '15 at 16:51
the ampersand is unnecessary, it compiles to the same thing without it. https://css-tricks.com/the-sass-ampersand/ – Ray May 07 '20 at 04:50

score 27 · Answer 2 · edited Oct 23 '20 at 14:54

27

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

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

edited Oct 23 '20 at 14:54

KyleMit

30,350
66
462
664

answered Mar 30 '20 at 17:51

DINA TAKLIT

7,074
10
69
74

6

I think that one who upvote it adds something for him/her. – DINA TAKLIT Apr 02 '20 at 23:06
9

the ampersand is unnecessary https://css-tricks.com/the-sass-ampersand/ – Ray May 07 '20 at 04:50

score 6 · Answer 3 · answered May 17 '15 at 19:03

6

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.

answered May 17 '15 at 19:03

ryanpcmcquen

6,285
3
24
37

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 – SuperDJ May 17 '15 at 19:11
Or, perhaps: `header > div, header > div > div {}`? – ryanpcmcquen May 17 '15 at 19:21
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. – ryanpcmcquen Dec 20 '16 at 16:47

Select only direct children from element with Sass

3 Answers3