CODEWITHSUNDEEP
htmlcss
user70192
user70192

Reputation: 14234

Using Nested CSS Definitions

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

Upvotes: 0

Views: 382

Answers (2)

matewka
matewka

Reputation: 10168

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;
}

Upvotes: 1

xyhhx
xyhhx

Reputation: 6674

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.

Upvotes: 2

Related Questions