Polymer property as css selector is not working

Question

i am trying to use a polymer property active as css selector. This is working for :host[active] and for example 3 in my code :host[active] > #content.

However I am not understanding why is it not possible for example 1 #content[active]?

Here is my test-code:

Thanks for your answers.

<dom-module id="polymer-component"> 
  <template>
    <div id="content">test</div>
  </template>

  <style>
    :host {
      width: 50px;
      height: 50px;
      color: blue;
    }

:host[active]{
  color: yellow;
}

#content{
  width: 50px;
  height: 50px;
}
/*Example 1*/
#content[active]{
  color: red;
}
/*Example 2*/
:host #content[active]{
  color: red;
}
/*Example 3*/
:host[active] > #content{
  color: red;
}
/*Example 4*/
:host (#content[active]){
  color: red;
}
  </style>
</dom-module>

<script>
Polymer({
    is: "polymer-component",
    properties: {
      active: {
        type: Boolean,
        reflectToAttribute: true
      }
    }
  });
</script>

Answer 1

As you have not mapped active attribute to the div it will never work.

Here's an example of how you can make #content[active] work

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="polymer-component">
  <template>
    <div id="content" active$={{active}}>test</div>
  </template>

  <style>
    :host {
      width: 50px;
      height: 50px;
      color: blue;
    }
    :host[active] {
      color: yellow;
    }
    #content {
      width: 50px;
      height: 50px;
    }
    /*Example 1*/
    #content[active] {
      color: red;
    }
    /*Example 2*/
    :host #content[active] {
      color: green;
    }
    /*Example 3*/
    :host[active] > #content {
      color: black;
    }
    /*Example 4*/
    :host (#content[active]) {
      color: palegoldenrod;
    }
  </style>
</dom-module>

<script>
  Polymer({
    is: "polymer-component",
    properties: {
      active: {
        type: Boolean,
        value: false,
      }
    }
  });
</script>


<polymer-component active></polymer-component>

If you inspect the example you'll see that #content[active] was applied but was overwritten by third example ie host[active] > #content