Formatera ul/li i olika för olika nivåer?

Nu är jag ju lite halvsovande, så jag kanske missar något, men jag hade nog använt jQuery för att lägga på en class på alla "li ul li" som inte har någon "ul" under sig. För du hade inget principiellt emot att använda klasser?

Nä, det har jag visserligen inte, men om man måste javascripta så kanske jag överväger att grotta in i php-koden och lägga på klasser där i stället.

Om du nu tycker att jQuery är så tungt javaskriptande... men annars är det ju egentligen bara två selektorer om inte jag tänker helt fel:
$(document).ready(function(){
$("li").css("text-transform", "none");
$("li").has("ul").css("text-transform", "uppercase");
});

Utan att kolla på någon cheatsheet känns det enklaste som att använda child-of-selektorn:

ul > li > ul > li

Denna väljer en li på nivå 2 (eftersom det är en li inuti en ul inuti en li inuti en ul)

Edit:
Tänk på att du bör göra toppnivåns lista unik, så att du inte råkar peka på en helt annan typ av li i strukturen.
T.ex med ett id:

ul#tree>li>ul>li

Detta är en CSS2-selektor.

Vad jag vet finns ingen selector som väljer ett element utan descendants.
Detta är vad du frågar efter när du säger "sista barnet". Sista barnet är något annat och fås med selektorn (CSS3)

:last-child

.

Lite nyttig läsning:
http://www.w3.org/TR/CSS2/selector.html

Fast ett problem är ju att även ett "löv-li" har descendants - textnoden. Så alla "li" i listan har ju descendants.

Det känns ju ändå som om det enklaste är att ha en speciell CSS-klass för de noder som skall vara versaler. Antingen peta på den i PHP eller med jQuery.

Oldtimer skrev:

Om du nu tycker att jQuery är så tungt javaskriptande... men annars är det ju egentligen bara två selektorer om inte jag tänker helt fel:
$(document).ready(function(){
$("li").css("text-transform", "none");
$("li").has("ul").css("text-transform", "uppercase");
});

Det gör ju faktiskt precis det jag vill, så jag kör på det om jag inte får svar i den andra tråden. Tack!

funkade inte min lösning?

Edit:
Inte för att jag vill ha en blåmarkering runt mitt inlägg, utan snarare av intresse... =)

doridori skrev:

funkade inte min lösning?

Edit:
Inte för att jag vill ha en blåmarkering runt mitt inlägg, utan snarare av intresse... =)

Men din lösning fixade väl bara fasta utseende per nivå?
Jag behövde ett sätt att t.ex. styla nivå två på ett vis om det inte fanns en nivå tre och på ett annat sätt om det fanns en nivå tre.

bassebhu skrev:

Men din lösning fixade väl bara fasta utseende per nivå?
Jag behövde ett sätt att t.ex. styla nivå två på ett vis om det inte fanns en nivå tre och på ett annat sätt om det fanns en nivå tre.

Ser inget större problem att lösa det med CSS (även om inte alla webbläsare har stöd för :last-child). Men känns som jquery är enklare då du kan använda :has(ul) om du vill göra något speciellt med li element som har ul-element i sig.

bassebhu skrev:

Men din lösning fixade väl bara fasta utseende per nivå?
Jag behövde ett sätt att t.ex. styla nivå två på ett vis om det inte fanns en nivå tre och på ett annat sätt om det fanns en nivå tre.

Ja, det gjorde den. Missade ditt krav där :)

Tänk på att om du använder Javascript så kan du inte få samma stil om användaren inte kör Javascript.
Se därför till att sidan är funktionell även utan Javascript.

Vill du inte sätta klasser i HTML så är Javascript absolut enklast.

voigtann1 skrev:

Ser inget större problem att lösa det med CSS (även om inte alla webbläsare har stöd för :last-child)

:last-child är dock inte rätt selektor i det här fallet.
Den väljer sista child under en nod. T.ex den li som förekommer sist inuti en ul.

<ul>
  <li>1</li>
  <li>2
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
  <li>3</li>  <---- :last-child
</ul>

Att välja en nod utifrån dess descendants går inte med CSS, eftersom det inte finns någon selektor som söker i underliggande element.

jag utgick ifrån ditt svar att det var det bassebhu var ute efter