element > element in SASS?

Question

i've searched around and just not found the answer to this, but hoping it's a simple answer to be honest!

I'm learning SASS, and have been attempting to convert an existing .css file. I came across a selector in there like this.

div > p { 
    background-color: yellow;
}

how is this achieved with SASS?

is it the same? or is there a way to nest it like you do with multiple classes like this...

.header{
    .p{
        color:black;
    }
}

please point me in the right direction!

yes, i did try a few things. I didn't include them because i didn't think showing my failed attempts would have added any value to the actual question. and i'm sorry i did not come across the previously answered question, i did look, but must've worded the search differently and it didn't turn up an answer for me. — Stuart, Dec 01 '15 at 15:19

Technotronic · Accepted Answer · 2015-12-01T13:05:19.743

7

Here you go:

div {
  > p {
       // You style
      }
}

Explanation:

When you use nesting like this:

div {
    p {
       //
      }
}

It compiles into:

div p {
       //
}

So if you want to be a direct child

div > p {
       //
}

Then you need to specify it.

edited Dec 01 '15 at 13:05

answered Dec 01 '15 at 11:55

Technotronic

1

Please explain your solution a little – sodawillow Dec 01 '15 at 12:37
1

thank you @technotronic, I appreciate your answer :) – Stuart Dec 01 '15 at 15:20

score 0 · Answer 2 · answered Dec 01 '15 at 11:51

0

something like the following should work:

.header{
    &>.p{
        color:black;
    }
}

answered Dec 01 '15 at 11:51

Raman

2 Answers2