Dwie listy, ta sama klasa, element w innej liście ma inny kolor

Question

Hej mam 2 listy utworzone
 

https://jsfiddle.net/jwvwLnLk/1/

 

Można zrobić tak by element o klasie "Change" mial w 1 liście tło zółte a w drugiej liście tło czerwone? (Konieczność niezmieniania nazwy klas)

Answer 1

Poczytaj o selektorach.

Edit:

O selektorach też możesz poczytać, ale chodziło mi o pseudo-klasy (pseudo-classes).

#first .change{ 
	color:red;
}
#second .change{ 
	color:blue;
}

Jeśli chciałbyś mieć listę wypunktowaną, w której punkt jest innego koloru niż tekst to zastosuj taki trick:

#first > li span{ 
	color:black;
}

<li class="Change"><span>3</span></li>

https://www.w3.org/wiki/CSS/Selectors#Structural_pseudo-classes
https://www.w3.org/TR/css3-selectors/

Answer 2

Owszem, można.

W CSS możesz użyć selektor rodzica wraz z jego potomkiem, albo dwa występujące obok siebie elementy itd, więc tego wypadałoby użyć jeśli nie chcesz zmieniać klasy.

Link do mdn na temat selektorów

Comments

Ok, a jesli nie moge użyć na bazie rodzic - potomek, bo te li moze zmieniac pozycje to co wtedy?

---

ale nie musisz używać nazwy tagu w CSS, możesz się posłużyć nazwą id + nazwą klasy, czyli #first .Change i to zadziała.

PS. nie używaj nazw klas z dużej litery i staraj się stylować tylko po klasach, a nie po id ;)

---

okej dzieki :P