Darxor Darxor - 23 days ago 5
CSS Question

HTML CSS How to swap css attributes

I am working on a project and I have multiple pages.
I only have one CSS file. I have specified the tr:hover attribute in a table for one page, but on another page I also have a table where I do not want this to be applied. Is there any way? It changes the color upon hovering, but I want it to be applied only on the one specific page.

What comes on my mind is to make a second css file, but I would rather not do it as we were told to try to get everything into one.

Thank you.

Answer

You answer here is the wonderful world of body classes. You would apply a class to each page, for the home page you could use:

<body class="homePage">

for other pages, other classes. You then target these pages on a per page basis like this:

.homePage tr:hover {background: pink;}
.aboutPage tr:hover {background: red;} 

Alternatively you can simply ID the table:

<table id="table1">

and then target just that table:

#table1 tr:hover {background: pink}

...but I recommend the body tags as a good way to work in general.

Comments