daverich Posted February 23, 2017 Share Posted February 23, 2017 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 23, 2017 Share Posted February 23, 2017 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; } Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now