Power of Css selectors in Angular directives

I was recently suprised on how cool you can actualy make your directive selectors in Angular by adhering to css selector rules. In this short example we will showcase the use of :not(). Below is a simple example of two different directives using basicaly same selector. Now we know we can attach multiple directives to same DOM node however in this case only second directive would be rendered.

Two different directive using the same selector?

We will bypass this rule by making our second directive use CSS :not() pseudo class selector. First directive uses @Input() someInput so in our second directive me make sure that we avoid this element with selector: 'some-directive:not([someInput])'.

Using both directives in our HTML

Nice both are rendered in our DOM tree.