Using Nested CSS Definitions

Question

I've inherited some HTML / CSS code. I'm trying to understand it to make it work. Currently, I'm stuck on some nested CSS definitions. A primitive version of the HTML looks like the following:

<ul class='nav-items'>
    <li class='child-items'>            
        <a href='#'>Nav Item 1</a><br />
        <a href='#'>Nav Item 2</a><br />
        <a href='#'>Nav Item 3</a>
    </li>
</ul>

The CSS associated with this looks like the following:

.nav-items {
    .child-items a {
        color:orange;
        background-color:white;
        font-size:16pt;
    }

    .child-items a:hover {
        color:white;
        background-color:orange;
    }
}

The first CSS declaration (.child-items a) is working. I've confirmed this by changing the color from orange to black. However, the hover definition doesn't seem to work at all. Is there some limitation on nested style definitions? Is this approach even called nested css definition? I tried reading up on this syntactical approach however, I didn't have any luck Googling for what I thought it might be called.

Thanks

That CSS is invalid and the first declaration should not work. — Quentin
– Quentin, Commented Mar 14, 2014 at 15:39
If you've inherited this code, you should first figure out how is your CSS source processed before it gets to production. Nesting is not available in raw CSS (the one your browser sees) so your codebase relies probably on a preprocessor. There are many, like LESS and SASS, and people need to know which you are using to help you troubleshoot! — snooze92
– snooze92, Commented Mar 14, 2014 at 15:45
It looks good on CodePen, whether configured as SCSS or LESS. — snooze92
– snooze92, Commented Mar 14, 2014 at 15:50

xyhhx · Accepted Answer · 2014-03-14 15:42:56Z

2

You can't do that with normal CSS. It should look like this:

.nav-items .child-items a {
    color:orange;
    background-color:white;
    font-size:16pt;
}

.nav-items .child-items a:hover {
    color:white;
    background-color:orange;
}

But, if you do want that functionality, you can check out SASS.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_rules

It is a CSS preprocessor - meaning that you write some SASS code, and it compiles into usable CSS for your browser. With that, you can do exactly what you were first trying!

Note: you will need to install Ruby in order to use SASS.

answered Mar 14, 2014 at 15:42

xyhhx

6,6946 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matewka · Accepted Answer · 2014-03-14 15:43:45Z

1

Nesting selectors is not the part of CSS specification. The code you've inherited is probably SASS or LESS. To make your CSS work you must either install one of the above extensions or simply unnest the CSS:

.nav-items .child-items a {
    color:orange;
    background-color:white;
    font-size:16pt;
}

.nav-items .child-items a:hover {
    color:white;
    background-color:orange;
}

answered Mar 14, 2014 at 15:43

matewka

10.2k3 gold badges36 silver badges43 bronze badges

Collectives™ on Stack Overflow

Using Nested CSS Definitions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related