CSS: Hover-effect for a class

Question

I want to have a css class with a hover effect. I googled and found this:

table{
    border: 3px solid black;
  }
td:hover {background-color: yellow}

However, this gives me the hover-effect for all tables. And I want to have this effect for selected tables only. Somehow like this:

table{
    border: 3px solid black;
  }

.hovereffect {
    td:hover {background-color: yellow}
}

But this doesn't work. Does anyone know how to do it?

You can not nest rules like that in plain CSS, that is only possible in preprocessor languages like SASS/LESS. `.hovereffect td:hover` is the selector you want. — CBroe, Sep 10 '21 at 06:18

score 1 · Accepted Answer · answered Sep 10 '21 at 06:18

1

You can try this

.hovereffect td:hover {
    background-color: yellow
}

answered Sep 10 '21 at 06:18

IQBAL AHMED

61
1
5

score 0 · Answer 2 · answered Sep 10 '21 at 06:18

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      table{
    border: 3px solid black;
  }
  .tableone td:hover{background-color: yellow;}
  .tabletwo td:hover{background-color: yellow;}
  .tablethree td:hover{background-color: yellow;}  
    </style>
  </head>
  <body>
        <table class="tableone">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            <tr>
        </table>
        <table class="tabletwo">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            <tr>
        </table>
        <table class="tablethree">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            <tr>
        </table>
  </body>
</html>

An explanation to this answer would be helpful as code only answers are discouraged — empiric, Sep 10 '21 at 06:19

score 0 · Answer 3 · answered Sep 10 '21 at 06:32

There is a really easy fix for this called classes.

In your HTML file you can assign classes to elements like <div>, <p>, <article> etc, etc.

<div class="container"></div>

You can call these classes in your CSS file like this

.container{
  //Place Code here     
}

for your hover effect you can try this

.container td:hover{
    background-color: yellow;
}

classes are a really efficient way of assigning styles to specific elements!

CSS: Hover-effect for a class

3 Answers3