Question

As usual, I’ve Googled this and read through the documentation (W3C’s CSS Selectors documentation), but still have been unable to find an answer.

It’s very difficult and almost definitely counter-productive to explain why I’ve set my stylesheets up this way, so I’ll just show you a section of one of my CSS stylesheets and ask what I came here to ask.

I know that .className, for example, is a global class – it is applied to every element that uses it on all pages that the stylesheet is linked to – and that #sectionID .className, for example, is a local class – it is only applied to the elements that uses it inside of the element with the ID of sectionID.

So, is there is a way to somehow set a temporary / relative root for a style sheet, so that the following extract:

#sectionID1 .className1, #sectionID1 .className2, #sectionID1 .className3, #sectionID1 a, #sectionID1 a:link, #sectionID1 a:visited, #sectionID1 a:hover, #sectionID1 a:active, #elementID2 input {
    color: #0084B4;
}

can become something like this:

#sectionID1 .className1, .className2, .className3, a:link, a:visited, a:hover, a:active, #elementID2 input {
    color: #0084B4;
}

Thanks 🙂

(Sorry for my bad explaining and, almost definite, incorrect use of terminology :L)

Answer 1

No but you can use something like LESS, to achieve such dynamics