[CSS] attribute selector in combinatie met andere selectors

[ATS]

Ik probeer voor een webkit browser een opmaak van een stukje HTML in CSS te defineren. De HTML ziet er alsvolgt uit:

HTML:

<div class="column" number="0"><div class="row" number="0"><div class="cell" ItemIsRoot="true" ItemIsLeaf="true"><a href="a1">a</a> test <b>document</b><img src=":/images/ok.png"></div></div></div>
<div class="column" number="0"><div class="row" number="1"><div class="cell" ItemIsRoot="true" ItemIsLeaf="true"><i>italics</i> <b><a href="a2">bold</a></b> <h1>header 1</h1></div></div></div>
<div class="column" number="0"><div class="row" number="2"><div class="cell" ItemIsRoot="true" ItemIsLeaf="true"><img src=":/images/warning.png"><a href="a3">link a3</a> <span style="color: red;">red text</span></div></div></div>

Dat wil zeggen: drie niveau's van divs (column, row en cell) met elk wat custom attributes en wat content er in. En nee, dit kan niet in een tabel, en die rare URL's voor de images zijn ook het probleem niet

Ik probeer nu op basis van de attributen van de omringende divs de contents op te maken. Een stukje CSS zoals dit werkt bijvoorbeeld:

Cascading Stylesheet:

div.row h1 {background:#ff0; text-align:right;}

Echter, als ik een specifieke row zou willen selecteren en dus dit doe:

Cascading Stylesheet:

div[class~=row][number="2"] h1 {background:#ff0; text-align:right;}

dan werkt het helemaal niet. Toch valideert deze CSS bij W3C als geldig.

Zie ik iets over het hoofd? Kan je überhaupt selecteren op elements die een decendant zijn van een ander element met specifieke attributes? In wat ik op internet kan vinden over het combinere van CSS selectors, kom ik er geen voorbeelden van tegen, maar wordt ook nergens gesuggereerd dat het niet zou kunnen.

[Bosmonster]

En als je gewoon class=row doet?

En idd, dit hoort eigenlijk gewoon in een tabel natuurlijk

[ Voor 50% gewijzigd door Bosmonster op 31-05-2010 17:35 ]

[ATS]

class=row helpt niet, en is volgens de specs zelfs onvolledig. Volgens de CSS specs zijn .row en [class~="row"] of [class~=row] equivalent.

ook

Cascading Stylesheet:

div.row[number="2"] h1 {background:#ff0; text-align:right;}

werkt niet.

De reden dat dit niet in een tabel kan, is dat het stiekum niet om een webpagina gaat, maar om het renderen van individuele cellen in een Qt item view via een QItemDelegate met behulp van de webkit renderer. De HTML wordt dus cell voor cell gerenderd.

[jaspara]

En als je nou gewoon de html zo

HTML:

<div class="column een">blaat</div>

en de css zo

Cascading Stylesheet:

.column.een { background-color: #333; }

doet?

Zie dit: http://css-discuss.incutio.com/wiki/Multiple_Classes

Het is misschien een andere manier, maar het werkt wel

Ik zie trouwens ook niet dat je in een div een number kan neerzetten... http://www.w3.org/TR/html401/struct/global.html

[ Voor 79% gewijzigd door jaspara op 31-05-2010 18:46 ]

[ATS]

Je oplossing met de classes werkt niet, omdat:
1) je zo geen onderscheid kan maken tussen de nummers van kolommen en rijen,
2) het aantal rijen en kolommen niet vaststaat van te voren in de HTML. Die wordt namelijk dynamisch gegenereerd. De style sheet niet overigens.

Maargoed, wellicht kan ik een oplossing gebruiken als:

HTML:

<div class="cell row_1 column_3">foo bar</div>

doen. Dat zal ik morgen even testen als ik terug ben.

Edit: dat werkt op zich wel prima.

Ik zie onder die link die je aanhaalt niet staan dat ik geen extra attributes mag toevoegen, noch dat attributes geen getallen als waarden mogen hebben...

Edit: Ondanks de workaround, ben ik wel benieuwd of wat ik oorspronkelijk van plan was toch zou kunnen.

[ Voor 11% gewijzigd door ATS op 01-06-2010 09:53 . Reden: Code layout en aanvullingen ]