<code>
<div class="test1 test2">
En länk
</div>

.test1.test2 a { color: red; }
.test3 { color: blue; text-weight: bold; }
</code>

Länken blir röd och fet. Varför? Borde inte färgen bli blå eftersom test3 är satt på länken och bör då vara högre prioriterad?


/Thomas

Du har angett en mer specifik regel i och med att du skrev ".test1.test2 a". Skriver du "a.test3" borde det bli som du vill ha det.

Det är som Thomas säger.

Vill du komma runt det kan du skriva

<code>
<div class="test1 test2">
En länk

.test1.test2 a { color: red; }
.test3 { color: blue !important; text-weight: bold; }
</code>

bra guide:
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Ok, hade visst missat några detaljer i hur prioriteringen fungerar. Men om vi tänker oss det här scenariot:
<code>
<div class="test1 test2">
En länk
</div>
<div class="test4 test5">
En annan länk
</div>

.test1.test2 a { color: red; }
.test4.test5 a { color: green; }
.test3 { color: blue; text-weight: bold; }
</code>

Hur ska jag då få test3 att bli blå? Jag vill inte använda !important. En lösning är ju självklart att ange typ:
<code>
.test1.test2 a.test3, .test4.test5 a.test3 { color: blue; text-weight: bold; }
</code>
Men jag hade ju helst sett en mer generell lösning...


/Thomas

Fungerar "a.test3"? Kanske inte blir specifik nog...

Nej det fungerar inte.


/Thomas

Ja, grejen är ju att "test1 test2 a" är mer specifik än "test3". Det är inte mycket annat att be för än att antingen:
1. Se till att just de instanserna du är ute efter är mer specifika, precis som du föreslår själv.
2. Override:a med !important.

1:an kan du ju lösa på andra sätt. Sen kan man ju fråga sig hur många "test1 test2"-varianter du har?
Blir det verkligen så många specialfall?

Eller så kan du testa

html body a.test3 { ... }
eller
html body div a.test3 { ... } om du vet att den alltid ligger i en div.

Kolla länken, det där hjälper ju inte. Det är färre klasser än i Thomas andra.
Däremot borde något i stil med

html.arne body.arne a.test3 { ... }

kunna funka?

Då måste jag alltså sätta klasser på html och body också?
Börjar ju bli gränsfall ful-lösningar :-)

/Thomas

"Börjar bli"? =)

Spontant känns det ju som att ID är det som borde vara bäst?

ID fungerar inte eftersom dom måste vara unika och länkarna kan vara olika många (dom hämtas från en databas).


/Thomas

Jag tycker att du istället borde ha en bättre generell struktur på din markup och css.
Varför skall du ha test1 och test2 i div om du har en länk som har en class som viker från den generella länk-regeln ( a{} ), vad är syftet?

Självklart är exemplet starkt förenklat och divarna innehåller mycket mer än bara en länk.
<code>
Länk A
<div class="test1 test2">
Länk B
Länk C
</div>
<div class="test4 test5">
Länk B
Länk C
</div>
</code>

Länk A är en genrell länk ( a {} ), Länk B är dom "generella" länkarna inom den diven ( .test1.test2 a { } ) och slutligen är Länk C speciella länkar, tex som är till för administrering och ska därför se annorlunda ut. Jag trodde som sagt att jag kunde få ut Länk C genom att sätta en speciell klass på den men det gick ju inte.


/Thomas