Can not target div with CSS [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
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:
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).
I CAN assign an id to that div by overriding the class and modifying the table's functionality in order to get this:
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:
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.
EDIT
Not sure if this will help but my javascript uses the following function to create the subtable:
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();
});
}
Here is a snippet from the YUI Library where it expands the row
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 getExpansionState
*/
this.fireEvent( "rowExpandedEvent", state);
return true;
}
},

Answer 1

You can try something like this:
div.dataMonitorSubtable.yui-dt {
background-color: red;
}