Jak wystylizować listę, żeby tylko jedna z zagnieżdżonych list miała czcionkę w innym kolorze?

Question

Mam zagnieżdżone listy i chciałabym żeby tylko elementy drugiej listy miały czcionkę koloru zielonego. Jak to można naprawić? 

 

	<ol>
		<li>Pierwsza</li>
		<li>Pierwsza	
		<ul>
			<li>Druga
			<ul>
				<li>Trzecia</li>
				<li>Trzecia</li>
				<li>Trzecia</li>
			</ul>
			</li>
			<li>Druga</li>
		</ul>
		</li>	
		<li>Pierwsza</li>				
	</ol>

 

i style: 

ol > li > ul > li {
	color: green;
}

 

Answer 1

Elementy drugiej listy, czyli wszystkie <li>Trzecia</li> ? Wtedy w CSS napisz tak:

ol > li > ul > li > ul {
    color: green;
}

Propozycja Danieter77 jest OK, tylko jeśli będziesz miała więcej takich list (które mają być zielone) to wtedy nie ID, ale dodaj klasę.

Comments

Jako elementy drugiej listy chodziło mi o Druga . Niedokładnie się chyba wysłowiłam.

---

No to nie widzę problemu:

 

html:

<li id="id listy">Druga</li>

a w css:

#id listy
{
   color: green;
}

 

---

Pewnie musisz połączyć to co Krzycho92 napisał ze swoim kodem, coś takiego może: http://jsfiddle.net/2bZAW/5015/

---

albo w ten sposób

---

Pomyślałem nad właściwością CSS :not(x) (dla elementów trzeciej listy), ale coś nie umiem jej tu zastosować.

ol > li > ul > li :not(ul)  {
    color: green;
}

Tylko, że koloruje tylko tą trzecią listę, a chciałem aby kolorował wszystko, tylko nie to :(

---

Można z :not(s) w ten sposób na przykład: http://jsfiddle.net/2bZAW/5016/.

Tylko czy trzeba sobie tak życie komplikować skoro można to rozwiązać w łatwiejszy i wspierany przez stare ie sposób?

Answer 2

może daj temu li id ?

Comments

Zaleca się używać class'y

Answer 3

Masz dwie możliwości, pierwsza bardziej profesjonalna nadać temu ul jakąś klasę np: <ul class="lista-dwa"></ul> i odwołać się w css .lista-dwa { color: green; } albo wpisać ścieżkę bezwzględną i po prostu wypisujesz po kolei znaczniki aż dojdziesz do swojego drugiego menu. Będzie to wyglądało następująco: ol > li > ul > li > ul { color: green; }