Stabilire prioritati in css

[andras]

Salut,
Vreau ca la click pe o linie din tabel html linia sa primeasca un background, iar la click pe alta linie aceasta sa primeasca background iar vechea linie sa revina la background-ul tabelei, astfel incit la un momend dat o singura linie sa fie marcata.
Am incercat mai multe variante cu JS si CSS, unele functioneaza altele nu (probabil pentru ca intra in conflict una cu alta). Spre exemplu, am observat ca daca definesc ceva de genul:

Cod: Selectaţi tot

<style type="text/css">
tbody.tdtab1 tr:nth-child(even) td{
  background-color:white;
}
</style>

atunci nu mai functioneaza daca adaug cu JS o clasa CSS la acel element:

Cod: Selectaţi tot

<style type="text/css">
.selected  {
   background-color:red;
}	
</style>

Cum stabilesc eu prioritatile pentru a putea lucra corect? Multumesc.

Salut
Daca vrei ca o proprietate css sa nu fie rescrisa de una similara din alt selector, adauga " !important " dupa valoarea proprietatii.
Exemplu:

Cod: Selectaţi tot

.selected  {
   background-color:red !important;
}

- Sau, ceva mai complicat, poti sa folosesti si instructiunea not() ca sa elimini o anumita selectie din aplicarea proprietatilor.
De exemplu, la codul tau:

Cod: Selectaţi tot

tbody.tdtab1 tr:nth-child(even) td:not(.selected){
  background-color:white;
}
.selected  {
   background-color:red;
}

- In ansambu subiectul cu prioritatile in css e ceva mai complex. Iata doua tipuri:

1. Conteaza ordinea in care sunt scrise datele. Ultimul le rescrie pe cele precedente, de acelasi tip.
In acest exemplu, Div-ul va avea background #00cc00:

Cod: Selectaţi tot

<style>
div {
background:red;
}
.cls {
background:#00cc00;
}
</style>

<div class="cls">Test ..</div>

2. ID-ul are prioritate mai mare decat clasa, chiar daca clasa e setata dupa el, nu-l rescrie.
In acest exemplu, Div-ul va avea background albastru (de la ID):

Cod: Selectaţi tot

<style>
#dv {
background:blue;
}
.cls {
background:#00cc00;
}
</style>

<div id="dv" class="cls">Test ..</div>

- Dar daca alaturi de clasa adaugi si ID-ul in css, il va rescrie.
In acest exemplu, Div-ul va avea background #00cc00 (de la clasa):

Cod: Selectaţi tot

<style>
#dv {
background:blue;
}
#dv.cls {
background:#00cc00;
}
</style>

<div id="dv" class="cls">Test ..</div>

- Prioritatea cea mai mare o are instructiunea " !important ", nu e afectata de ordine sau tipul selectorului (id, clasa).

Foarte utile precizarile. Le-am aplicat si acum am in sfirsit controlul proprietatilor in CSS.