What is ">ul" means in SASS?

sass stylus
nuk picture nuk · Aug 5, 2013 · Viewed 18.5k times · Source

Here is the SASS code part:

#main-nav{
     >ul{
              blahblah
        }
}

So I want to know the exact mean of the string ">ul" means? I cannot find it in the SASS manual.

Furthermore, can it be translated to stylus?

Answer

Burhan Khalid picture Burhan Khalid · Aug 5, 2013

This the CSS syntax to select the child of an element. See this reference for more on how it works:

This selector matches all elements that are the immediate children of a specified element. The combinator in a child selector is a greater-than sign (>). It may be surrounded by whitespace characters, but if it is, Internet Explorer 5 on Windows will incorrectly treat it as a descendant selector. So the best practice is to eschew whitespace around this combinator.

Related questions

What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

Read More
Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) If I use the literal 50px instead of my …

Read More
How to fix ReferenceError: primordials is not defined in node

I have installed node modules by npm install, then I tried to do gulp sass-watch in command prompt. After that I got the below response. [18:18:32] Requiring external module babel-register fs.js:27 const { Math, Object, Reflect } = primordials; ^ ReferenceError: primordials is not …

Read More