Problems grouping and nesting selectors

[aulda]

Hi How much grouping and nesting of selectors is it possible to do? Here is my example but it is not working properly unless I entirely separate the two descriptors.

#onecolnavigation #navigation a:link, #onecolnavigation #navigation a:visited, #onecolnavigation #navigation a:hover, #onecolnavigation #navigation a:active {
 /* display: block; */
text-decoration: none;
text-align: center;
line-height:2;
padding:3px;
transition: background 1.5s, color 1.5s;
-webkit-transition: background 1.5s, color 1.5s;
-moz-transition: background 1.5s, color 1.5s;
-o-transition: background 1.5s, color 1.5s; border-radius:0.5em;
}

#onecolnavigation #navigation a:link {
    color: #fff;
    background: #A82D37;
    }

#onecolnavigation #navigation a:visited {
    color: #fff;
    background: #A82D37;
    }

#onecolnavigation #navigation a:hover {
    color: #A82D37;
    background: #8DBDE0;
    }

#onecolnavigation #navigation a:active {
    color: #A82D37;
    background: #8DBDE0;
    }'

Thanks

[magicspon]

I don’t know that there is a limit on the number of classes that can be grouped. But if you’ve got shed loads of classes grouped it might make more sense to just create a new class and add that to your html.

As far as nesting goes, again I don’t know that there is a limit with either Sass or Less. However it is recommended that you don’t nest more than three levels. ie.

#onecolnavigation {
    #navigation  {
        a:link,
        a:visited,
        a:hover,
        a:active {
            /* display: block; */
            text-decoration: none;
            text-align: center;
            line-height:2;
            padding:3px;
            transition: background 1.5s, color 1.5s;
            -webkit-transition: background 1.5s, color 1.5s;
            -moz-transition: background 1.5s, color 1.5s;
            -o-transition: background 1.5s, color 1.5s; border-radius:0.5em;
        }
        a:link,
        a:visited {
            color: #fff;
            background: #A82D37;
        }
        a:hover,
        a:active {
            color: #A82D37;
            background: #8DBDE0;
        }
    }
} 

[aulda]

Thanks, that’s very useful – and also corrects my terminology (classes!).
Andrew

[magicspon]

you’re welcome… your terminology is correct… you aren’t actually using any classes in your css so my terminology was wrong! You’ve just got ID and element selectors…

I would recommend using classes instead of ID’s though.

http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/

[Author]

Posts