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.

Reply via email to