Event that doesn’t work for a particular tag without having to put id on the tags that has to have the event

Question

Event that doesn’t work for a particular tag without having to put id on the tags that has to have the event

Asked 3 years, 8 months ago

Viewed 23 times

1

I’m doing a web programming assignment, a story I have in high school. In this task I have to build a table of a schedule of football games, while doing I decided to increment the task with a tr:hover in css, but I couldn’t block one of the tags tr to receive the event without having to use the id in the tags I wanted the event.

tr:hover{
    background-color: #606060;
}
th{
    background-color: #707070;
}
td {
    text-align: justify;
    vertical-align: text-top;
}
tfoot td{
    text-align: center;
}

<body>
    <table border="1,5" width="90%" cellspacing="0">
        <thead>
            <caption>CRONOGRAMA DE JOGOS</caption>
        </thead>
        <tbody>
            <tr>
                <th>DATA - DIA</th>
                <th>HORA</th>
                <th>JOGO</th>
                <th>ESTÁDIO</th>
                <th>CIDADE</th>
                <th>UF</th>
            </tr>
            <tr>
                <td rowspan="5">18/07 - QUA</td><!--Esse td não pode ter o evento-->
                <td>19:30</td>
                <td>Ceará CE &times; Sport PE</td>
                <td>Castelão</td>
                <td>Fortaleza</td>
                <td>CE</td>
            </tr>
            <tr>
                <td>21:00</td>
                <td>Vitória BA &times; Paraná PR</td>
                <td>Manoel Barradas</td>
                <td>Salvador</td>
                <td>BA</td>
            </tr>
            <tr>
                <td>21:45</td>
                <td>Flamengo RJ &times; São Paulo SP</td>
                <td>Maracanã</td>
                <td>Rio de Janeiro</td>
                <td>RJ</td>
            </tr>
            <tr>
                <td>21:45</td>
                <td>Corinthians SP &times; Botafogo RJ</td>
                <td>Arena Corinthians</td>
                <td>São Paulo</td>
                <td>SP</td>
            </tr>
            <tr>
                <td>21:45</td>
                <td>Grêmio RS &times; Atlético MG</td>
                <td>Arena do Grêmio</td>
                <td>Porto Alegre</td>
                <td>RS</td>
            </tr>
            <tr>
                <td rowspan="5">19/07 - QUI</td><!--Esse também não-->
                <td>19:30</td>
                <td>Cruzeiro MG &times; América MG</td>
                <td>Mineirão</td>
                <td>Belo Horizonte</td>
                <td>MG</td>
            </tr>
            <tr>
                <td>19:30</td>
                <td>Chapecoense SC &times; Bahia BA</td>
                <td>Arena Condá</td>
                <td>Chapecó</td>
                <td>SC</td>
            </tr>
            <tr>
                <td>20:00</td>
                <td>Vasco da Gama &times; Fluminense RJ</td>
                <td>São Januário</td>
                <td>Rio de Janeiro</td>
                <td>RJ</td>
            </tr>
            <tr>
                <td>20:00</td>
                <td>Santos SP &times; Palmeiras SP</td>
                <td>Pacaembu</td>
                <td>São Paulo</td>
                <td>SP</td>
            </tr>
            <tr>
                <td>21:00</td>
                <td>Atlético PR &times; Internacional RS</td>
                <td>Arena da Baixada</td>
                <td>Curitiba</td>
                <td>PR</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6"><sub>Feito em 23/03/2021 às 22:00</sub></td>
            </tr>
        </tfoot>
    </table>

</body>

"I couldn’t block one of the tags tr of receiving the event without having to use the id in the tags I wanted the event" and what is this TR? explain better

– Ricardo Pontual

2021/03/24 at 10:01
You mean the first TD of TR? You don’t want the DIA cell to have the gray background?

– hugocsl

2021/03/24 at 12:15
It would be the first td of the second tr and the first td of the seventh tr. Which are tds that occupy more than one line.

– Saymon R B Dos Santos

2021/03/24 at 12:45
Exactly, the day cell can’t have the background changed, because as it occupies more than one line the event only works for it when it hovers the mouse in the first line, which is strange.

– Saymon R B Dos Santos

2021/03/24 at 13:04

2 answers

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2021-03-24T14:08:23+00:00

Puts the class class="dia" on the TR, and then force the color only on the first daughter TD tr.dia:hover > td:first-of-type { background-color: #fff; }

See the full example

tr:hover{
    background-color: #606060;
}
tr.dia:hover > td:first-of-type {
    background-color: #fff;
}
th{
    background-color: #707070;
}
td {
    text-align: justify;
    vertical-align: text-top;
}
tfoot td{
    text-align: center;
}

<table border="1,5" width="90%" cellspacing="0">
    <thead>
        <caption>CRONOGRAMA DE JOGOS</caption>
    </thead>
    <tbody>
        <tr>
            <th>DATA - DIA</th>
            <th>HORA</th>
            <th>JOGO</th>
            <th>ESTÁDIO</th>
            <th>CIDADE</th>
            <th>UF</th>
        </tr>
        <tr class="dia">
            <td rowspan="5">18/07 - QUA</td><!--Esse td não pode ter o evento-->
            <td>19:30</td>
            <td>Ceará CE &times; Sport PE</td>
            <td>Castelão</td>
            <td>Fortaleza</td>
            <td>CE</td>
        </tr>
        <tr>
            <td>21:00</td>
            <td>Vitória BA &times; Paraná PR</td>
            <td>Manoel Barradas</td>
            <td>Salvador</td>
            <td>BA</td>
        </tr>
        <tr>
            <td>21:45</td>
            <td>Flamengo RJ &times; São Paulo SP</td>
            <td>Maracanã</td>
            <td>Rio de Janeiro</td>
            <td>RJ</td>
        </tr>
        <tr>
            <td>21:45</td>
            <td>Corinthians SP &times; Botafogo RJ</td>
            <td>Arena Corinthians</td>
            <td>São Paulo</td>
            <td>SP</td>
        </tr>
        <tr>
            <td>21:45</td>
            <td>Grêmio RS &times; Atlético MG</td>
            <td>Arena do Grêmio</td>
            <td>Porto Alegre</td>
            <td>RS</td>
        </tr>
        <tr class="dia">
            <td rowspan="5">19/07 - QUI</td><!--Esse também não-->
            <td>19:30</td>
            <td>Cruzeiro MG &times; América MG</td>
            <td>Mineirão</td>
            <td>Belo Horizonte</td>
            <td>MG</td>
        </tr>
        <tr>
            <td>19:30</td>
            <td>Chapecoense SC &times; Bahia BA</td>
            <td>Arena Condá</td>
            <td>Chapecó</td>
            <td>SC</td>
        </tr>
        <tr>
            <td>20:00</td>
            <td>Vasco da Gama &times; Fluminense RJ</td>
            <td>São Januário</td>
            <td>Rio de Janeiro</td>
            <td>RJ</td>
        </tr>
        <tr>
            <td>20:00</td>
            <td>Santos SP &times; Palmeiras SP</td>
            <td>Pacaembu</td>
            <td>São Paulo</td>
            <td>SP</td>
        </tr>
        <tr>
            <td>21:00</td>
            <td>Atlético PR &times; Internacional RS</td>
            <td>Arena da Baixada</td>
            <td>Curitiba</td>
            <td>PR</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="6"><sub>Feito em 23/03/2021 às 22:00</sub></td>
        </tr>
    </tfoot>
</table>

by Vitor Ceolin • **464** points · Answer 2 · 2021-03-24T12:17:54+00:00

If you don’t want all tr elements receive the property, it is better to make a class.

Let’s say you don’t want only the footer to have this property, it would look like this:

.classeHover:hover{
    background-color: #606060;
}
th{
    background-color: #707070;
}
td {
    text-align: justify;
    vertical-align: text-top;
}
tfoot td{
    text-align: center;
}

<body>
    <table border="1,5" width="90%" cellspacing="0">
        <thead>
            <caption>CRONOGRAMA DE JOGOS</caption>
        </thead>
        <tbody>
            <tr class="classeHover">
                <th>DATA - DIA</th>
                <th>HORA</th>
                <th>JOGO</th>
                <th>ESTÁDIO</th>
                <th>CIDADE</th>
                <th>UF</th>
            </tr>
            <tr class="classeHover">
                <td rowspan="5">18/07 - QUA</td>
                <td>19:30</td>
                <td>Ceará CE &times; Sport PE</td>
                <td>Castelão</td>
                <td>Fortaleza</td>
                <td>CE</td>
            </tr class="classeHover">
            <tr class="classeHover">
                <td>21:00</td>
                <td>Vitória BA &times; Paraná PR</td>
                <td>Manoel Barradas</td>
                <td>Salvador</td>
                <td>BA</td>
            </tr>
            <tr class="classeHover">
                <td>21:45</td>
                <td>Flamengo RJ &times; São Paulo SP</td>
                <td>Maracanã</td>
                <td>Rio de Janeiro</td>
                <td>RJ</td>
            </tr>
            <tr class="classeHover">
                <td>21:45</td>
                <td>Corinthians SP &times; Botafogo RJ</td>
                <td>Arena Corinthians</td>
                <td>São Paulo</td>
                <td>SP</td>
            </tr>
            <tr class="classeHover">
                <td>21:45</td>
                <td>Grêmio RS &times; Atlético MG</td>
                <td>Arena do Grêmio</td>
                <td>Porto Alegre</td>
                <td>RS</td>
            </tr>
            <tr class="classeHover">
                <td rowspan="5">19/07 - QUI</td>
                <td>19:30</td>
                <td>Cruzeiro MG &times; América MG</td>
                <td>Mineirão</td>
                <td>Belo Horizonte</td>
                <td>MG</td>
            </tr>
            <tr class="classeHover">
                <td>19:30</td>
                <td>Chapecoense SC &times; Bahia BA</td>
                <td>Arena Condá</td>
                <td>Chapecó</td>
                <td>SC</td>
            </tr>
            <tr class="classeHover">
                <td>20:00</td>
                <td>Vasco da Gama &times; Fluminense RJ</td>
                <td>São Januário</td>
                <td>Rio de Janeiro</td>
                <td>RJ</td>
            </tr>
            <tr class="classeHover">
                <td>20:00</td>
                <td>Santos SP &times; Palmeiras SP</td>
                <td>Pacaembu</td>
                <td>São Paulo</td>
                <td>SP</td>
            </tr>
            <tr class="classeHover">
                <td>21:00</td>
                <td>Atlético PR &times; Internacional RS</td>
                <td>Arena da Baixada</td>
                <td>Curitiba</td>
                <td>PR</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6"><sub>Feito em 23/03/2021 às 22:00</sub></td>
            </tr>
        </tfoot>
    </table>

</body>

That way, you have absolute freedom to choose who will own the property or not, just put in what you want them to be part of the class you created (class="classeHover")

Read the class documentation to learn more.