Colore alternato righe tabella tranne righe specifiche

**GM02** · 08-01-2023, 11:28

Salve a tutti.
Sono veramente un principiante in HTML E CSS, quindi perdonatemi se la mia domanda dovesse sembrarvi banale.
Con un codice HTML ho creato una tabella formata da tre colonne: Nome, Ore, Transazioni.
La righe della tabella sono formate da due team differenti composti da determinate persone.
Il mio problema è che son riuscito a rendere automatica la formattazione alternata delle righe con questa porzione di codice :

codice:

tr:nth-child(even){background-color:#ADF3FC;}

Ma purtroppo se il subtotale del team si trova in una riga pari, la formattazione alternata cambia anche il background del subtotale, che invece lo vorrei di un altro colore.
Allego il file CSS e HTML, così si capisce meglio. Grazie a tutti.

codice HTML:

codice:

<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora&display=swap">
<link rel="stylesheet" type="text/css" href="CSS_tabellaforum.css">


</head>
<body>


<h3 class="testoalcentro">Formattazione righe alternata:</h3> 
<h3 class="testoalcentro">tranne subtotali</h3>


<table>
    <tbody>
<!------------------------------------------------------------------------Intestazione-->        
        <tr>
            <th>Nome</th> 
            <th>Ore</th> 
            <th>Transazione</th> 
        </tr>
        
<!---------------------------------------------------------------------------Team_1-->                        
        <!--John S.-->
        <tr>                                    
            <td>John S.</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <!--Mario R.-->
        <tr>                                        
            <td>Mario R.</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <!--Luigi R-->
        <tr>                                             
            <td>Luigi R.</td>
            <td>1,5</td>
            <td>23</td>
        </tr>
        <!--Jack S.-->
        <tr>                                             
            <td>Jack S.</td>
            <td>2</td>
            <td>32</td>
        </tr>
        <!--Ciro N.-->
        <tr>                                           
            <td>Ciro N.</td>
            <td>1</td>
            <td>0</td>
        </tr>
        
        <!--Team_1 Subtotali-->
        <tr class="SubTotali">                                     
            <td></td>
            <td>7,5</td>
            <td>58</td>
        </tr>




<!-----------------------------------------------------------------------Team_2 Subtotali-->        
        <!--Andrea A.-->
        <tr>
            <td>Andrea A.</td>
            <td>3</td>
            <td>12</td>
        </tr>
        <!--Norberto R.-->
        <tr>
            <td>Norberto R.</td>
            <td>1</td>
            <td>3</td>
        </tr>
        <!--Davide M.-->
        <tr>
            <td>Davide M.</td>
            <td>1</td>
            <td>5</td>
        </tr>
        <!--Ascanio F.-->
        <tr>
            <td>Ascanio F.</td>
            <td>2</td>
            <td>4</td>
        </tr>


        <!--Team_2 Subtotali-->
        <tr class="SubTotali">
            <td></td>
            <td>7</td>
            <td>24</td>
        </tr>


<!------------------------------------------------------------------------------Totali-->    
        <!--TOTALI-->
        <tr class="Totali">
            <td>TOTALI</td>
            <td>14,5</td>
            <td>82</td>
        </tr>
    </tbody>
</table>
<br>
<div class="testoalcentro">
    <p>
        Domanda Forum HTML<br>
        Grazie a tutti<br>
    </p>
</body>
</html>

Codice CSS:

codice:

body
{
    font-family: Lora, Arial, Sans Serif;
    font-size: auto;
    color: black;
    background-color=white;


}


table
{
    margin-left: auto;
    margin-right: auto;
    font-size: auto;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-collapse: collapse;
    text-align: center;


}


tr:nth-child(even){background-color:#ADF3FC;} /*Righe pari evidenziate*/


td
{
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: black;
    padding: 5px;
}


th
{
    background-color: #0071B5; 
    color: white;
    font-family: Lora,Arial, Sans Serif;
    font-weight: bold;
    text-transform: uppercase;
    padding:5px;
    border-color: black;


}


.testoalcentro
{
    text-align:center;
}


.SubTotali 
{
    background-color: #FCCBAD; 
    color: #000000;
    font-weight: bold;
    text-align: center;
}


.Totali
{
    background-color: #0071B5;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}

**KillerWorm** · 10-01-2023, 17:21

Ciao e benvenuto

Risposta breve

Modifica il secondo selettore in questo modo:

codice:

tr.SubTotali

Risposta dettagliata

Originariamente inviata da GM02

perdonatemi se la mia domanda dovesse sembrarvi banale

Niente da perdonare, l'argomento non è poi così banale. Anche volendo, se non si conoscono quelle terminologie tecniche necessarie per poter effettuare delle ricerche mirate, è abbastanza difficile trovare autonomamente delle informazioni utili per poter risolvere. In tal caso hai tutto il diritto di rivolgerti ad un forum.

Parliamo infatti di specificità CSS. A volte è un argomento non troppo facile anche per i meno principianti

In sostanza si tratta di un valore calcolato dall'interprete CSS in modo da stabilire la priorità di una regola (e di ciascuna relativa proprietà) rispetto alle altre che agiscono sullo stesso elemento.

Molto brevemente la specificità di ciascun selettore è calcolata in base a 3 fattori: numero di selettori per id, numero di selettori per classi o per attributi o pseudo-classi, numero di selettori per nome tag (elementi) o pseudo-elementi; i quali restituiscono rispettivamente un valore per le centinaia, per le decine e per le unità.

A parità di valore ha priorità la regola che viene scritta/letta per ultima.

Tra parentesi: altri fattori, come l'uso di style in linea (scritto direttamente sui tag HTML) o l'uso della clausola !important, determinano una maggiore priorità nella considerazione delle relative proprietà CSS rispetto alle stesse applicate senza l'uso di tali fattori.

Nel tuo caso, la regola con questo selettore:

codice:

tr:nth-child(even)

possiede un selettore per tag (tr) e una pseudoclasse (:nth-child(even)).

Il valore della sua specificità è quindi 011.

Mentre la regola con questo selettore:

codice:

.SubTotali

possiede solo un selettore per classe.

Il valore della sua specificità è quindi 010.

Vince quindi la prima regola dal momento che 011 è maggiore di 010.

Il mio consiglio è quello di aumentare la specificità del selettore che vuoi sia considerato. Per farlo è sufficiente ottenere una specificità uguale (se non maggiore) rispetto alla prima regola:

Questo selettore:

codice:

tr.SubTotali

possiede un selettore per tag (tr) e un selettore per classe (.SubTotali).

Il valore della sua specificità è quindi 011, pari alla prima regola.
In base a quanto già indicato, vince comunque quest'ultima per il fatto che è scritta/letta dopo l'altra.

Per maggiori informazioni sulla specificità CSS, e argomenti inerenti, ti invito a fare qualche ricerca sul web o dare uno sguardo al capitolo 2 "Come funzionano i CSS" dei link utili CSS, sotto la voce "Specificità, ereditarietà, override", dove puoi trovare diversi riferimenti a guide e calcolatori online riguardo tale argomento.

E' tutto, buona permanenza sul forum e buon proseguimento

Discussione: Colore alternato righe tabella tranne righe specifiche

Strumenti discussione

Ricerca discussione

Visualizza

Colore alternato righe tabella tranne righe specifiche

Permessi di invio