css specificity for hovering
css, css-specificity, html
Solution
You should post the HTML code, not the code that generates it, it's irrelevant here.
First problem: are you certain there can't be 2 `no-bills` id on the same page?
Then your problem: you're trying to style `td:hover` that is a descendant of `#no-bills`. The latter is the same td, not an ascendant! You should then style `#bill-list #no-bills:hover`, which appears to be a `td` being hovered.
Problem
I'm having css specificity issues. I want the `<td>` style to be colored different if there are 'no bills', so I set the style with an if statement. If there are no bills, the style is `style = "id=\"no-bills\"";`. I got this to work with css. Now, if the user hovers over it, I want the background to go red - so I modified the css and added `#bill-list #no-bills td:hover`, which has `td:hover` to add some extra specificity when you hover over it. Unfortunately, this doesn't work (the background stays the same). here's my css: ``` #bill-list { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; /*margin: 45px;*/ width: 100%; text-align: left; border-collapse: collapse; } #bill-list th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; } #bill-list td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; } #bill-list tr:hover td { background: #d0dafd; color: #339; } #bill-list #bill td { background: white; } #bill-list #no-bills { background: #FFCC99; } #bill-list #no-bills td:hover { color: orange; background: red /*#FFCC66*/; } ``` here's my code (snippet): ``` <table id="bill-list"> <thead> <tr> <% for (int i=0; i<vecHeader.size(); i++) { %> <th><%=vecHeader.get(i) %></th> <% } %> </tr> </thead> <tbody> <% int uniqueId = 0; for (int i=0; i < vecValue.size(); i++) { boolean hasBills = true; String style = ""; if ( vecBills.get(i) == null || vecBills.get(i).size() == 0 ) { hasBills = false; style = "id=\"no-bills\""; } %> <tr id="bill<%=i%>" onclick="javascript:showBillDetails(<%=i%>)"> <% for (int j=0; j < vecHeader.size(); j++) { prop = (Properties)vecValue.get(i); %> <td <%=style%>><%=prop.getProperty((String)vecHeader.get(j), " ") %> </td> <% } %> </tr> ... ... ``` Anyone have any ideas?