---
title: "Problem med omfärgning via CSS-klasser"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/157685-problem-med-omfärgning-via-css-klasser"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "aasah"
published: "2007-03-01T11:37:15.000Z"
updated: "2007-03-01T22:15:42.000Z"
replies: 3
views: 466
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/157685-problem-med-omfärgning-via-css-klasser"
---

# Problem med omfärgning via CSS-klasser

## #1 — aasah, 2007-03-01T11:37Z

Jag har ett interaktivt korsord som är uppbyggt av en tabell där rutnätets utseende beror av olika CSS-klasser. Detta funkar fint nästan hela vägen... men tyvärr inte riktigt överallt. En normal vit ruta har CSS-klassen **vit**, om den vita rutan innehåller en svängande pil, används CSS-klassen **turnXY**. (Där XY beror på hur den svänger.) När korsorden kollas, jämför jag inskrivna ord mot avsedda från en databas, och om dessa bokstäver *inte* stämmer får rutan CSS-klassen **facit** i **tillägg** till övrig klass. Facit är avsedd att göra texten röd. 

Detta funkar fint för vanliga vita rutor, men verkar inte ha någon effekt på svängande sådana??   :q Hur är det möjligt?

Ett exempel för tydlighets skull: (Den feta bokstavens ruta innehåller en svängande pil.)
Inskrivet ord: WAL**L**S 
Riktigt ord: JAM**E**S
**Borde** färgats enligt: **JAMES**

Resulterar i följande korrekta HTML: (Utdrag)

```
<td id="td_D1" class="vit facit">J</td> == > Röd (Riktigt, ty fel bokstav)
<td id="td_D2" class="vit">A</td> ==> Svart (Riktigt, ty rätt bokstav)
<td id="td_D4" class="turnDF facit">E</td> ==> Svart (FEL, ty fel bokstav)
```

Se också bifogad bild. (Klasserna blir alltså rätt, men inte färgen i browsern.)

```
/* I CSS-filen */
#cw td.vit {
  background:url(vitRuta.gif); /*genomskinlig*/
  background-color:#ffffff;
  color:black;
  font-weight: bold;
  border:1px solid black;
  padding:5px;
  margin:0;
  width:1em;
}

#cw td.facit {
  color: #DC143C;
  font-weight: bold;
  border:1px solid black;
  padding:5px;
  margin:0;
  width:1em;
}

#cw td.turnDF {  /* Down -> Forward */
  background:url(arrowDownToForw.gif); /*genomskinlig*/
  background-color:#ffffff;
  color:black;
  font-weight: bold;
  padding:5px;
  margin:0;
  width:1em;
}
```

Vad 17 är det som gör att "vit facit" ==\> röd text, men "turnDF facit" ==\> svart???   :q 

Detta gäller både IE (v 6.0) och FF.

Bilagor:

- [weird.gif](https://www.webforum.nu/a/13861.gif)

Permalänk: https://www.webforum.nu/p/157685

## #2 — jarvklo, 2007-03-01T11:59Z

\#cw td.facit  och #cw td.turnDF har samma "specificitet" och bägge anger textfärg...

Om jag kommer ihåg min CSS rätt så bör fenomenet alltså bero på att  #cw td.turnDF ligger "längre ner" i CSS-koden samtidigt som de två har samma "specificitet" (ungefär "vikt")...

Om du sätter en background-color: på .facit händer förmodligen samma sak med den - det blir bakgrundsfärgen för .turnDF som gäller.

Pröva att flytta om reglerna så att #cw td.facit hamnar efter   #cw td.turnDF i CSS-koden och se om inte det löser ditt problem (övriga värden i de två är ju lika vad jag kan se ;) )

Ett annat sätt att lösa det här är förmodligen att enbart sätta "color: black" direkt på td, och sedan ange color: bara i de klasser där textfärgen avviker från svart...

Permalänk: https://www.webforum.nu/p/1941390

## #3 — aasah, 2007-03-01T20:21Z

Båda de föreslagna lösningarna fungerar och tack vare den utförliga förklaringen har jag kunnat banta min CSS-fil rejält. Numera har td ett eget utseende och alla speciella korsordsvarianter sätter bara den egenskap de ändrar i stället för att varje klass sätter allt. 

Tusen tack, jarvklo!   :birp

Permalänk: https://www.webforum.nu/p/1941540

## #4 — jarvklo, 2007-03-01T22:15Z

Skönt att det löste sig :bire

Permalänk: https://www.webforum.nu/p/1941584

---

Tråden på webben: https://www.webforum.nu/amne/html-css/157685-problem-med-omfärgning-via-css-klasser