CSS style if not kids

Question

I need to apply a style to an element if a particular class is NOT a child of this element.

<table class="printlist" style="width:100%"> <tbody> <tr class="list_wanted0"><td>Whatever...</td></tr> <tr class="list_wanted1"><td> <div class="journal"> <table><tbody> <tr><td style="width: 9em">2011-03-12 09:36</td></tr> </tbody></table> </div> </td></tr> </tbody> </table> 

The above example is minimized to demonstrate structure.

I want the :Hover properties only apply to .printlist tr if <tr> has a child of NO .journal .

.list_wanted0 and .list_wanted1 cannot be used to select .journal , these can be other class names.

The CSS I tried is:

 .printlist tr:Hover * :not(itemjournal) { color: #000; background: #aaa } 

Obviously, this does not work as I intended.

If you need more information, feel free to ask,
Thanks.

Answer 1

I got it for work

I thought I would answer my question and present my pure CSS solution.

The solution was to create two classes and merge them into <tr>

 <table class="printlist" style="width:100%"> <tbody> <tr class="list_wanted0 list_hover"><td>Whatever...</td></tr> <tr class="list_wanted1"><td> <div class="journal"> <table><tbody> <tr><td style="width: 9em">2011-03-12 09:36</td></tr> </tbody></table> </div> </td></tr> </tbody> </table> 

I only needed to add the hover class:

 .list_hover:Hover { color: #000; background: #aaa } 

On all <tr> lines that require guidance, I combine any class that I like with the class .list_hover and exclude it from the .journal line.

Now it works exactly as intended. Thank you for your help.

Answer 2

This is not possible with CSS selectors; you cannot use CSS to determine if an element has a specific child type or not. It is best to use JavaScript to apply classes and customize these classes instead.

Example using jQuery-only :has() selector :

 $('.printlist tr').not(':has(.journal)').addClass('nojournal'); 

Then apply styles to .printlist tr.nojournal:hover .

Answer 3

Yes, unfortunately, you will need to use a javascript-based solution such as jQuery offered by BoltClock, especially if you want the CSS style to be consistent between browsers, given the fact that not all browsers implement the full CSS standard specifications.

If you still want to use only the CSS version, try to find the cheat sheet for what types of CSS selectors are supported in those browsers / versions.