CSS: Syntax priority

Is there a priority order when referencing in CSS?
Here is my dilema:  I want the table formatted every other row with different colors (even/odd)…

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;}

I want the row to highlight a third color when the user hovers over the row…

table.nx-skootable-data tbody tr:nth-child(even):hover td,
table.nx-skootable-data tbody tr:nth-child(odd):hover td {
    background-color: lightsteelblue;

Finally, I want the table to have a 4th color when the row’s drawer is opened…

table.nx-skootable-data tbody tr.nx-item-has-drawer td {    background-color: black;
    color:white;
    font-weight: bold;}

(BTW, any help in making the above CSS more efficient is most welcome!)

My confusion is over the order in which these options prioritize.  I want the “has-drawer” reference to take top priority, but it seems like the “hover” reference has it.  If a drawer is opened, I want the row to show that color, regardless of whether or not the user is hovering over it…

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? :wink:

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?