title: Can not target div with CSS
body: <p>I am having a CSS newb problem. We are still using the old YUI2 which I am using to create sub-tables within a table as in this:</p>
  
  <p><a href="https://i.stack.imgur.com/BICOp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BICOp.png" alt="enter image description here"></a></p>
  
  <p>When the sub table is shown YUI extands the height of the row and adds a white div as you can see. I would like to add some style to that div (behind the subtable).</p>
  
  <p>I CAN assign an id to that div by overriding the class and modifying the table's functionality in order to get this:</p>
  
  <p><a href="https://i.stack.imgur.com/2EWWe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2EWWe.png" alt="enter image description here"></a></p>
  
  <p>I would really rather not go this route. I would prefer to just target the div with CSS but my inexpereince has trumped me. When I inspect the div google gives me this:</p>
  
  <p><a href="https://i.stack.imgur.com/Ecth1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ecth1.png" alt="enter image description here"></a></p>
  
  <p>How do I target the highlighted div? This seems like it should be easy as I can see right there what classes the div has but I just can't get it.</p>
  
  <p><strong>EDIT</strong>
  Not sure if this will help but my javascript uses the following function to create the subtable:</p>
  
  <pre><code>DMAS.deviceconsole.datamonitor.DataMonitorOverviewTable.prototype.secondSubTable = function(state){
      var json = {
          "Fruit":[
              {"name":"apples","type":"fruit", "color":"red"},
              {"name":"broccoli","type":"veg","color":"red"},
              {"name":"cherriess","type":"fruit","color":"red"}
          ]
      };
  
  var dsLocalJSON2 = new YAHOO.util.DataSource(json);
  dsLocalJSON2.responseType = YAHOO.util.DataSource.TYPE_JSON;
  dsLocalJSON2.responseSchema = {
      resultsList : "Fruit",
      fields : ["name","type","color"]
  };
  var fruitDT = new REDT(
      state.expLinerEl,
      [
          {key:'name', label:'Name', sortable:true}, 
          {key:'type', label:'Type', sortable:true}, 
          {key:'color', label:'Color', sortable:true}
      ],
      dsLocalJSON2,
      {
          className : "dataMonitorSubtable"
      }
  );
  
  // Store the reference to this datatable object for any further use 
  // (specially destroying it, as above)
  this.setExpansionState(state.record,NESTED_DT,fruitDT);
  
  //Subscribe to the rowExpansionDestroyEvent so I can destroy the tracksDT table
  // before its container (the album row) is gone and it ends a zombie
  fruitDT.on(this,'rowExpansionDestroyEvent', function (state) {
      state[NESTED_DT].destroy();
  });
  }
  </code></pre>
  
  <p>Here is a snippet from the YUI Library where it expands the row</p>
  
  <pre><code>   expandRow : function( recordId ){
          var state = this.getExpansionState( recordId );
          if( !state.expanded){
              this.setExpansionState( recordId, 'expanded', true );
              var expTrEl = state.expTrEl,
                  record = state.record,
                  trEl = this.getTrEl( record );
              if (expTrEl) {
                  Dom.insertAfter(state.expTrEl,this.getTrEl(recordId));
                  Dom.setStyle(state.expTrEl,'display','');
              } else {
                  expTrEl = document.createElement('tr');
                  var expTdEl = document.createElement( 'td' ),
                      expLinerEl = document.createElement( 'div' ),
                      template = this.get(TEMPLATE);
                  Dom.addClass(expTrEl, CLASS_EXPANSION);
                  expTdEl.colSpan = this.getFirstTrEl().childNodes.length;
                  Dom.addClass(expLinerEl, CLASS_LINER);
                  expTrEl.appendChild( expTdEl );
                  expTdEl.appendChild( expLinerEl);
                  this.setExpansionState( recordId, 'expTrEl', expTrEl);
                  this.setExpansionState( recordId, 'expLinerEl', expLinerEl);
  
                  // refresh the copy of the expansion state
                  state = this.getExpansionState(recordId);
                  if( Lang.isString( template ) ){
                      expLinerEl.innerHTML = Lang.substitute( template, record.getData() );
                  } else if( Lang.isFunction( template ) ) {
                      template.call(this,  state );
                  } else {
                      return false;
                  }
              }
              //Insert new row
              Dom.insertAfter( expTrEl, trEl );
              Dom.replaceClass( trEl, CLASS_COLLAPSED, CLASS_EXPANDED );
              /**
               * Fires when a row is expanded
               *
               * @event rowExpandedEvent
               * @param state {Object} see &lt;a href="#method_getExpansionState"&gt;getExpansionState&lt;/a&gt;
               */
              this.fireEvent( "rowExpandedEvent", state);
              return true;
          }
  
      },
  </code></pre>