CSS: Syntax priority

  • 1
  • Question
  • Updated 4 years ago
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...
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb

Posted 4 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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.
(Edited)
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
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.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
You sure the drawer styling is working to being with? Try removing the hover styling for a minute to see.
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
yea - definitely working because the styling works when the mouse is hovering over a different row and the drawer is open...
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Did you want :hover to turn off if any drawer is open, or just not :hover for drawers that are open?
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
definitely "just not :hover for drawers that are open"
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
This what you have for the hover styling?
:hover :not(nx-item-has-drawer)
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
that did it... thanks so much Pat!
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Sweet. Now can I have that CSS? ;)
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
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".
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Slick! Thanks.
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
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;}
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
my head hurts now ...
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
So does mine...
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Hey Scott.

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