[css] Selectors in tree

[arnem_]

Inmiddels aardig wat nagelezen over selectors en toch geen css newbie meer (dacht ik), kom ik toch echt niet uit de volgende case:

code:

<div>
    <div>
        blah 1
    </div>
    <div>
        blah 2
        <div>
            blah3
        </div>
        <div>
            blah 4
        </div>
    </div>
</div>

Ik wil dat de achtergrond(bijv.) van (mbv van selectors) de laatse division veranderen (als deze geen div-childeren meer heeft) als de muis erover gaat. In dit geval moet de kleur van de division-achtergrond dus veranderen als ik over alleen de betreffende division ga met met mijn muis.
Ga ik over de muis met content blah 2 moet de achtergrond van die div dus veranderen en niets anders. Ik heb de selector "last-child" geprobeerd maar dat werkt niet want die slaat alleen op de laatste tak in de boom.

code:

div:hover{
 background-color:#f00;
}

slaat op de hele div-boom.

Met:

code:

div:last-child:hover{
 background-color:#f00;
}

krijg ik alleen blah 3 en blah 4 op de juiste manier terug. Maar ik wil dus ook het veranderen van de achtergrond in blah 2 goed terug krijgen. Browser compatibility is niet iets waar ik me druk over maak, alleen de standaarden gelden. Ik hoop het probleem in ieder geval duidelijk te hebben neergezet, zo niet, leg ik het graag nog eens op een andere manier uit.

[ Voor 4% gewijzigd door arnem_ op 05-05-2009 09:28 ]

[bakakaizoku]

Cascading Stylesheet:

div { background-color: #fff; }
div div div:hover { background-color: #f00; }

maar je kan er gewoon beter een ID of een class aan hangen, want nu heb je een probleem als er een div zich nest in "blah 4"

[arnem_]

mattttt schreef op dinsdag 05 mei 2009 @ 02:02:

Cascading Stylesheet:

div { background-color: #fff; }
div div div:hover { background-color: #f00; }

maar je kan er gewoon beter een ID of een class aan hangen, want nu heb je een probleem als er een div zich nest in "blah 4"

ik wil het juist generiek hebben en dus gebruik maken van de beschikbare selectors ipv van het handmatig toevoegen van id's.

[MoietyMe]

Ik denk dat je hier toch echt het beste een class/id kunt gebruiken. Die zijn ook niet voor niks gemaakt. En helaas is er geen second-child selector.

Dit komt wel in CSS3, dus als je dat niet erg vind kun je hier eens een kijkje nemen: Selectors Level 3

[_Thanatos_]

Er is wel degelijk een second child selector, alleen die moet je improviseren:

Cascading Stylesheet:

div > div + div { ... } /* de 2e e.v. op niveau 2 */
div > div + div + div { ... } /* de 3e e.v. op niveau 2 */

Nadeeltje is dat de + combinator eigenlijk siblings selecteert, dus, in dit geval, selecteert ie behalve de 2e ook de 3e en verder. Maar met volgende selectors, met meerdere + combinators dus, kun je die weer overrulen.

En anders zou je nog met :nth-child kunnen spelen, maar ik betwijfel of er veel hedendaagse browsers zijn die dat snappen.

Tot die tijd zou je eventueel ook met javascript een tussenoplossing kunnen maken.

[disjfa]

Of je gebruikt een lijstje met een element erin die je highlight. Zodat dat element niets te maken heeft met de childcontainers (denk menu met linkjes. li = container en a is gebruikte element)

[arnem_]

disjfa schreef op dinsdag 05 mei 2009 @ 09:59:
Of je gebruikt een lijstje met een element erin die je highlight. Zodat dat element niets te maken heeft met de childcontainers (denk menu met linkjes. li = container en a is gebruikte element)

Dit kan in ieder geval niet want ik weet niet hoe groot de boom gaat worden en op welk niveau er dus iets gedaan moet worden. Ik ga toch wat dieper het 'nth'-child CSS3 principe doornemen.

Ik wil dit principe eerst aan de achterkant toepassen en in dit geval is browser compatibiliteit geen issue. Daarnaast, tegen de tijd dat ik klaar ben met waar ik mee bezig ben .....
Zover bedankt in ieder geval.

[LuCarD]

Misschien een beetje offtopic, maar als ik de startpost lees moet ik gelijk denken aan: do you smurf what I smurf?

[arnem_]

Ik heb het opgelost door aan elk element een namespace mee te geven met de waarde van het niveau waarop het object zich bevindt.

Cascading Stylesheet:

[level]{
    min-height:3px;
    min-width:3px;
    margin:1px;
    padding:1px;
    border: 1px solid #f00;
}

[level]:hover{
    cursor:pointer;
}

[level="0"]:hover{
    background-color:hsl(210, 70%, 98%);
}

[level="1"]:hover{
    background-color:hsl(30, 70%, 95%);
}
enz....

Jammer dat je altijd de parents ook actief te zijn krijgt, dat had van mij niet gehoeven.

[H004]

Hoe ziet de bijbehorende HTML er dan uit? En valideert dat/wordt het door de browsers ondersteund?

Zo?

HTML:

<div xmlns:level="1"></div>

[arnem_]

H004 schreef op dinsdag 05 mei 2009 @ 17:42:
Hoe ziet de bijbehorende HTML er dan uit? En valideert dat/wordt het door de browsers ondersteund?

Zo?

HTML:

<div xmlns:level="1"></div>

HTML:

<div id="container" level="0" onclick="xajax_showEditor(1);return false;">

Opera werkt prima, firefox vanaf 3.5. Maar dat maakt in dit geval dus niet uit. Ik heb het niet laten 'valideren' maar zo uit de handleiding overgenomen.

[ Voor 7% gewijzigd door arnem_ op 05-05-2009 17:55 ]

[MoietyMe]

Vroeg me zelf wel af hoe dit nou precies werkte. Aan de hand van jouw code even een testcase opgezet, misschien leuk voor de rest om eens naar te kijken: Level test-case.

Werkt overigens ook in Safari 4.0 Beta (maar dat is eigenlijk geen verrassing) en Firefox 3.0.5 op de Mac

[ Voor 19% gewijzigd door MoietyMe op 06-05-2009 00:53 ]

[Fuzzillogic]

_Thanatos_ schreef op dinsdag 05 mei 2009 @ 09:56:
Er is wel degelijk een second child selector, alleen die moet je improviseren:

Cascading Stylesheet:

div > div + div { ... } /* de 2e e.v. op niveau 2 */
div > div + div + div { ... } /* de 3e e.v. op niveau 2 */

Nadeeltje is dat de + combinator eigenlijk siblings selecteert, dus, in dit geval, selecteert ie behalve de 2e ook de 3e en verder. Maar met volgende selectors, met meerdere + combinators dus, kun je die weer overrulen.

Cascading Stylesheet:

div > div:first-child + div + ... { ... } /* Opgelost :)*/

[T-MOB]

Ik vraag me alleen af wat het voordeel van eigengemaakte attributen is boven het gebruik van een klasse.

HTML:

<div id="container" class="level0" onclick="xajax_showEditor(1);return false;">

Werkt al jaren, en blijft dat ook nog jaren doen \0/