daverich

Change table cell highlight for first 3 rows

2 posts in this topic

Hello friends!

I have this table with row highlighting – it highlights the rows in different colours (first 3 in dark and later in blue). I wonder If I can also change the table cell highlight to yellow for the first three rows and keep the rest as it is now?

Here is the style:

<style>
body {
    background-color: #0D0D0D;
}

tr:hover{
                background: #0000F7;
                color: rgb(102,102,102);
}


tr:hover td{
  background: transparent !important;
}

tr td:hover {
                background-color: #609 !important;
}

tr:nth-child(1):hover {
    background-color: #292C31;
}

tr:nth-child(2):hover {
    background-color: #292C31;
}
tr:nth-child(3):hover {
    background-color: #292C31;
}

a {
                color:#BFBFBF !important;         
}

a {
text-decoration:none !important;
}


</style>

And the file itself:

https://jsfiddle.net/33bxg04e/

 

Thanking you!)

Dave

Share this post


Link to post
Share on other sites

Use nth-of-type to target the third tr row, then target sibling tr elements beyond that and then there td child elements

                            tr td:hover {
                                background-color: yellow !important;
                            }
                            tr:nth-of-type(3) ~ tr td:hover {
                                background-color: #609 !important;
                            }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now