Apparently, there's no official name for this "class intersection" feature but it's described in the spec: http://www.w3.org/TR/css3-selectors/#class-html
On Wednesday, May 20, 2015 at 8:13:13 AM UTC-6, Gas Creature wrote: > > Thanks for the explanation. I found another good one here: > https://css-tricks.com/multiple-class-id-selectors/ > > But still don't know what this "trick" is officially called w.r.t. to the > CSS spec. > > On Wednesday, May 20, 2015 at 8:02:46 AM UTC-6, John Hathaway wrote: >> >> It's 2 classes, but I think here the idea is not so much "nested" as >> "both". >> So the rule with .ng-hide-add.ng-hide-add-active will be applied to >> classes that have both classes. >> >> You had the following CSS rules: >> >> .ng-hide-add.ng-hide-add-active, >> .ng-hide-remove { >> opacity: 0; >> } >> >> .ng-hide-add, >> .ng-hide-remove.ng-hide-remove-active { >> opacity: 1; >> } >> >> So <div class=''.ng-hide-add"> matches the second rule and will have >> opacity 0. >> <div class=''.ng-hide-add .ng-hide-add-active"> matches the first rule >> and will have opacity 1. >> >> >> On Tuesday, May 19, 2015 at 10:07:37 PM UTC-7, Gas Creature wrote: >>> >>> I'm learning basic animation in Angular and came across some hook CSS >>> classes. >>> Here is the little demo: http://plnkr.co/edit/6vT4gonxU4OPwT14eqg2 >>> My question is: What is the construct called, the ones that look like.... >>> .ng-hide-add.ng-hide-add-active >>> Is that a single class (ng-hide-add.ng-hide-add-active) or is it some >>> kind of nested class construct, sort-of like ng-hide-ad > ng-hide-active >>> ? >>> I've never seen such a CSS declaration before in my, admittedly brief, >>> readings about CSS. >>> >>> Clarifications about what this is would make me "feel better" :) >>> >>> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
