Selector: (groep elementen) x (groep elementen)

[evertVB]

Ik wil dus een sudoku puzzle presenteren in html.
Daarin moeten de 3x3-boxen om en om een iets ander kleurtje krijgen.

In mijn html staat elke rij en elke kolom als een klasse:

<tr class="r1">
<td class="c1">&nbsp</td><td class="c2">&nbsp</td><td class="c3">9</td><td class="c4">&nbsp</td><td class="c5">&nbsp</td><td class="c6">&nbsp</td><td class="c7">1</td><td class="c8">&nbsp</td><td class="c9">&nbsp</td>
</tr>
<tr class="r2">
<td class="c1">&nbsp</td><td class="c2">&nbsp</td><td class="c3">&nbsp</td><td class="c4">4</td><td class="c5">6</td><td class="c6">7</td><td class="c7">8</td><td class="c8">2</td><td class="c9">&nbsp</td>
</tr>
...

In mijn css staat nu voor de kleur van de 1e box:

tr.r1 td.c1, tr.r1 td.c2, tr.r1 td.c3,
tr.r2 td.c1, tr.r2 td.c2, tr.r2 td.c3,
tr.r3 td.c1, tr.r3 td.c2, tr.r3 td.c3 {background: #CCFF77;}

Is er in plaats daarvan niet zoiets mogelijk?

(tr.r1, tr.r2, tr.r3) (td.c1, td.c2, td.c3) {background: #CCFF77;};

 

[Goeroeboeroe]

Nee. In css 3 heb je de mogelijkheid om iets te doen met elke tweede, of derde, enz. <tr> of wat dan ook. Maar dat wordt niet ondersteund door Internet Explorer 6, 7 en 8 en ook niet door andere oudere browsers.
Microsoft heeft met veel trompetgeschal aangekondigd dat IE 9 ook delen van css 3 gaat ondersteunen, maar dat blijkt vooralsnog alleen om ronde hoeken te gaan, dus voor alle browsers die 't niet ondersteunen zijn uitgestorven is de aarde waarschijnlijk gesmolten door de klimaatverandering.

Wat je zou kunnen doen, maar ik vraag me af of dat minder werk is.
Als je onder elk van die blokken van 9 'n div zet met 'n eigen achtergrondkleur.
Dan zou je de achtergrondkleur van de <td>'s doorschijnend kunnen maken. De combinatie van die doorschijnende achtergrondkleur met 'n andere kleur die erachter zit levert dan 'n unieke kleur op. Dus elke <td> linksboven kan de zelfde kleur krijgen, want erachter zit 'n div met 'n andere kleur.
Dat kan met behulp van rgba(). Dat werkt in alle nieuwere browsers. In Internet Explorer werkt het (uiteraard, zucht) niet, maar Microsoft heeft 'n filter dat ongeveer 't zelfde werkt, alleen veel ingewikkelder code is.

Fatsoenlijke browsers:

background: rgba(255, 0, 0, 0.5)

Exact hetzelfde voor IE 6, 7 en 8:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000, endColorstr=#7FFF0000

Automatisch converteren van rgba() naar 'n string die werkt in IE:
http://kimili.com/journal/rgba-css-generator-for-internet-explorer

Ik ben toevallig net 'n handleiding hiervoor aan 't schrijven, maar die is nog niet af.
Belangrijk als je dit zou doen: oudere browsers die wel css maar nog geen rgba kennen, negeren de achtergrondkleur volledig. Daardoor kan de tekst volledig onleesbaar worden bij 'n slechte kleurencombinatie.
Als je bijvoorbeeld zwarte letters gebruik moet je daarom voor de zekerheid 'n witte achtergrond daarvoor meegeven.
't Wordt dan in je css:

td {background: white; background: rgba(255, 255, 255, 0.5); (...)filter voor IE(...)}

Opera 9 bijvoorbeeld herkent de eerste background en negeert de tweede.
Opera 10 herkent ze beide, en dan wint de tweede, want die staat later. (dat is half doorzichtig wit. 255 is maximaal, en de doorzichtigheid in decimalen 0.5)
Maar er is nu hoe dan ook 'n witte achtergrond.
Als laatste de code voor IE, maar die kan ook in 'n apart bestand.
Maar of dit echt veel minder werk is...

Edit: 't kan denkelijk ook met JavaScript en de DOM, maar dat is niet mijn sterkste kant en dat is ook heel veel werk, denk ik.

 

[evertVB]

ok bedankt
Ik was even nieuwsgierig maar het werkt nu ook al.