Flera classer i samma tagg

4 svar · 298 visningar · startad av Web-Tor 14 dec. 2004

Web-TorMedlem sedan nov. 200013 890 inlägg

Frågan14 dec. 2004 13:50#1

Med följande kod vill jag få texten i cell 2 att bli bold och texten i cell 3 att bli italic men så blir inte fallet:

<style>
.rad1 {background:lightblue;}
.rad2 {background:pink;}
.rad1 .stil {font:bold;}
.rad2 .stil {font:italic;}
</style>

<table>
	<tr>
		<td class="rad1">Rad 1</td>
		<td class="rad1 stil">Cell 2</td>
	</tr>
	<tr>
		<td class="rad2">Rad 2</td>
		<td class="rad2 stil">Cell 3</td>
	</tr>
</table>

I mitt exempel skulle jag enkelt kunna lägga rad-klasserna till <tr>-taggarna men det funkat inte i den riktiga koden. Förslag? :)

Måste funka I Explorer 5.5+

PepeJeriaMedlem sedan feb. 2003774 inlägg

14 dec. 2004 14:02#2

<style type="text/css">
.rad1 {background:lightblue;}
.rad2 {background:pink;}
.rad1 .stil {font-weight:bold;}
.rad2 .stil {font-style:italic;}
</style>

Anledning till att ovan (notera att jag ändrade font attributen) inte fungerar, är att .stil är en underklass till .rad1 respektive .rad2, så ovan skulle bara fungera om du tex hade en span inuti cellerna med stil classen.

<td class="rad1"><span class="stil">Cell</span></td>

Jag föreslår att du inte har samma namn på css classen stil och att du inte har den som underklass, utan att du har den som .stil utan .radx framför.

<style type="text/css">
.rad1 {background:lightblue;}
.rad2 {background:pink;}
.stilFet {font-weight:bold;}
.stilKursiv {font-style:italic;}
</style>

<td class="rad1 stilFet">Cell</td>

PepeJeriaMedlem sedan feb. 2003774 inlägg

14 dec. 2004 14:06#3

Det kanske också vore intressant för dig att använda dig av col taggen för att sätta bakgrundsfärg på kolumnerna:

<style type="text/css">
.rad1 {background:lightblue;}
.rad2 {background:pink;}
.stilFet {font-weight:bold;}
.stilKursiv {font-style:italic;}
</style>

<table>
<col class="rad1" />
<col class="rad2" />
<tr>
	<td>Rad 1</td>
	<td class="stilFet">xxxx</td>
</tr>
<tr>
	<td>Rad 2</td>
	<td class="stilKursiv">Cell 3</td>
</tr>
</table>

dectgapMedlem sedan sep. 20021 655 inlägg

14 dec. 2004 14:17#4

Om du utelämnar mellanslaget, och skriver om font till font-weight resp. font-style så här:

<style type="text/css">
.rad1 {background:lightblue;}
.rad2 {background:pink;}
.rad1.stil {font-weight:bold;}
.rad2.stil {font-style:italic;}
</style>

Då blir det rätt ( http://www.w3.org/TR/CSS21/selector.html#class-html ), MEN det fungerar dessvärre inte i IE.

Web-TorMedlem sedan nov. 200013 890 inlägg

14 dec. 2004 14:19#5

PepeJeria skrev:

notera att jag ändrade font attributen

Vad är det för fel på att bara använda font i det här fallet?

PepeJeria skrev:

Det kanske också vore intressant för dig att använda dig av col taggen för att sätta bakgrundsfärg på kolumnerna

Nja, koden jag visar är som sagt var bara ett exempel. Jag kan inte få en <col> i den riktiga koden.

PepeJeria skrev:

Jag föreslår att du inte har samma namn på css classen stil och att du inte har den som underklass, utan att du har den som .stil utan .radx framför.

Jo, det är en lösning men det blir lite ologiskt i just det här fallet. Grejen är nämligen att båda .stil-cellerna ska ha samma betydelse. Enda skillnaden på utseendet är att en bakgrundsbild ska ligga till höger i det ena fallet och till vänster i det andra fallet. När koden ska lämnas över till implementatörerna hade det därför varit bra om class-namnet hade varit det samma. :)

dectgap skrev:

Då blir det rätt ( http://www.w3.org/TR/CSS21/selector.html#class-html ), MEN det fungerar dessvärre inte i IE.

Jo, har testat det där men som du skriver så blir det inte helt rätt. :(