How do you refer to a namespaced class with a pseudo selector?
#Namespace{
.class:focus{
prop: value;
}
.class + .class{
prop: value;
}
}
.anotherClass{
#Namespace.class:focus(); //this does not work
#Namespace.class:focus; //not working
#Namespace > .class:focus(); //this does not work
#Namespace > .class:focus; //not working
#Namespace > .class + .class; //not working either
}
In short: you can't. Only id and class (i.e. # and . respectively) selectors can be used as mixins. Pseudo and tag selectors cannot. See Mixins.
If you're planning to re-use some styles just define those as a (parametric) mixin:
#namespace {
.whatever-suitable-name() {
prop: value;
}
.class:focus {
.whatever-suitable-name();
}
}
.anotherClass {
#namespace > .whatever-suitable-name();
}
#Namespace > .class + .class;// not working either
Partially because of above (i.e. not every selector can be used as a mixin), but in this particular case you actually still can access that selector combination. Though the only "officially recommended" syntax for invoking a namespaced mixin is: #namespace > .mixin, unofficially: "combinators" (e.g. >, +, ~, whitespace etc.) are essentially ignored when compiler matches selectors for a mixin call, so:
#namespace {
.class + .class {
prop: value;
}
}
.anotherClass {
#namespace > .class > .class; // OK
#namespace .class .class; // OK
#namespace.class.class; // OK
#namespace.class > .class; // OK
// etc.
}
See also #1205.
