Egenskap på nästlad lista ska endast slå på förälder

[silfver]

http://jsbin.com/ibomuh/edit#html,live

Jag vill alltså att Libraries, Lists och Discussions ska få gul bakgrund. Men jag vrider och vänder på det utan att lyckas! Alltså alla <li> under första <ul> ska bli gula. Men inte de <ul> <om ligger nästlade i en <li>. Hoppas jag har förklarat så ni förstår.

Någon som har koll på det här och vill hjälpa mig?

[voigtann1]

det bli ju svårt, eftersom den översta ul täcker alla dess childs

men du kan ju alltid sätta det på de fösta lis första a-element i noden:

http://jsbin.com/ibomuh/2/edit

[silfver]

det bli ju svårt, eftersom den översta ul täcker alla dess childs

men du kan ju alltid sätta det på de fösta lis första a-element i noden:
http://jsbin.com/ibomuh/2/edit

Problemet med att sätta det på länken är att jag vill egentligen göra en border som omsluter varje rubrik-<li>. (ursäkta mig om jag krånglade till det från början...)

http://jsbin.com/ibomuh/4/edit

Kan man lösa detta utan att ta bort bordern utifall man får ännu fler nästlade noder?

[voigtann1]

Du vill att föräldern skall få en egenskap om den har en specifikt barn? Det kommer först i CSS4, men med jQuery

[silfver]

Du vill att föräldern skall få en egenskap om den har en specifikt barn? Det kommer först i CSS4, men med jQuery

Jag som var helt övertygad om att man kunde säga att alla <li> som ligger direkt under en <ul> kunde få en egenskap utan att påverka underliggande <ul> och <li>.

jQuery kanske blir en lösning om jag inte använder min "lösning".

Tack som vanligt voigtann1!

[voigtann1]

ja det kan du ju:
[kod]ul>li[/kod]Säger alla lin direkt efter en ul skall ha den stylen, men det hjälper inte direkt om man inte ha något "unikt" med första noden:
[kod].s4-ql>ul > li {
border: 1px solid black;
}[/kod]alla direkta barn till .s4-ql och dess direkta barn (<li>) skall ha en svart border.

men med en bakgrund så bli det ju jobbigt.

[silfver]

ja det kan du ju:
[kod]ul>li[/kod]Säger alla lin direkt efter en ul skall ha den stylen, men det hjälper inte direkt om man inte ha något "unikt" med första noden:
[kod].s4-ql>ul > li {
border: 1px solid black;
}[/kod]alla direkta barn till .s4-ql och dess direkta barn (<li>) skall ha en svart border.

men med en bakgrund så bli det ju jobbigt.

Jag får hoppas att CSS3 slår otroligt hårt och att arbetet med CSS4 slår ännu snabbare. Känns som en basic grej att vilja göra ändå! Tack för att du förklarar så en noob förstår!

[Danne V]

Jag kanske inte fattat vad det handlar om. Men om problemet bl.a. blir att den gula bakgrunden i en li-förälder också omfattar dess barn-ul (med sina egna li), så bör det ju gå att lösa lite småfult genom att istället för en hel bakgrundsfärg bara lägga in en lagom hög gul bakgrundsbild....

Eller?

[silfver]

Jag kanske inte fattat vad det handlar om. Men om problemet bl.a. blir att den gula bakgrunden i en li-förälder också omfattar dess barn-ul (med sina egna li), så bör det ju gå att lösa lite småfult genom att istället för en hel bakgrundsfärg bara lägga in en lagom hög gul bakgrundsbild....

Eller?

Bakgrundsfärgen var en liten vilseledande första kommentar av mig. Vad jag egentligen ville åstadkomma är att omsluta alla li-föräldrar med en border (som då omsluter en nästlad ul). Det har jag lyckats med i mitt andra inlägg men det har ju sina nackdelar att göra så t.ex. om man har ytterligare en nästlad lista.

[Danne V]

Bakgrundsfärgen var en liten vilseledande första kommentar av mig. Vad jag egentligen ville åstadkomma är att omsluta alla li-föräldrar med en border (som då omsluter en nästlad ul). Det har jag lyckats med i mitt andra inlägg men det har ju sina nackdelar att göra så t.ex. om man har ytterligare en nästlad lista.

Aha...ok.
Well, lycka till!

[voigtann1]

Till framtida referenser: http://www.w3.org/TR/2011/WD-selectors4-20110929/

så är det:
[kod]$E > F an E element parent of an E element[/kod]