CSS: Syntax priority

I’m no CSS guru, but from what I remember, the last thing to reference the element wins the styling. So, put you’re alternating row styling at the top, hover styling next, and drawer open last.

So all of it has to be in the same CSS resource.

Thanks Pat.  I thought the same thing, but the hover still overrides the drawer.  I’m not sure if this is simply the way the system handles it or not.

You sure the drawer styling is working to being with? Try removing the hover styling for a minute to see.

yea - definitely working because the styling works when the mouse is hovering over a different row and the drawer is open…

Did you want :hover to turn off if any drawer is open, or just not :hover for drawers that are open?

definitely “just not :hover for drawers that are open”

This what you have for the hover styling?
:hover :not(nx-item-has-drawer)

that did it… thanks so much Pat!

Sweet. Now can I have that CSS? 😉

sure thing:

table.nx-skootable-data tbody tr:nth-child(even):hover:not(.nx-item-has-drawer) td,table.nx-skootable-data tbody tr:nth-child(odd):hover:not(.nx-item-has-drawer) td {
    background-color: lightsteelblue;
    color:white;
    font-weight: bold;}

i added the “:not(.nx-item-has-drawer)” to the hover syntax.  the only change was the “.” in front of the “nx” and for some reason i needed to remove the space after “:hover”.

Slick! Thanks.

Here is another related issue:
Everything seems to be working well except that the drawer itself still reacts to the hover reference.  How can I remove the drawer from the hover?  I tried adding “:not(.nx-item-drawer)” after the “:not(.nx-item-drawer)”, but nothing…

table.nx-skootable-data tbody tr:nth-child(odd) td {    background-color: #FFFFF2;}
table.nx-skootable-data tbody tr:nth-child(even) td {
    background-color: #FFFFFF;}

table.nx-skootable-data tbody tr:nth-child(even):hover:not(.nx-item-has-drawer):not(.nx-item-drawer) td,

table.nx-skootable-data tbody tr:nth-child(odd):hover:not(.nx-item-has-drawer):not(.nx-item-drawer) td {
    background-color: lightsteelblue;
    color:white;
    font-weight: bold;}

table.nx-skootable-data tbody tr.nx-item-has-drawer td {
    border-top:1px rgb(53, 52, 52);
    border-left:1px rgb(53, 52, 52);
    border-right:1px rgb(53, 52, 52);
    border-bottom:0;
    background-color: #5F5C5C;
    color:white;
    font-weight: bold;}

table.nx-skootable-data tbody tr td.nx-item-drawer {
    background-color: #5F5C5C;
    color:white;
    border-left:1px rgb(53, 52, 52);
    border-right:1px rgb(53, 52, 52);
    border-bottom:1px rgb(53, 52, 52);
    border-top:0;}

my head hurts now …

So does mine…

Hey Scott.

Have you figured how to only have the effect show up on the drawer and not any of the parent drawers?