Formatowanie wybranej listy w Navbar

Question

Siema.

W tym filmiku Pana Mirosława.
https://www.youtube.com/watch?v=vd_GnTBzJ4U
Mamy listy w tym nav'ie.
Mój problem polega na tym że chcę np. zmniejszyć czcionkę tylko w liście wybranej..
Czyli to jest tak : Mamy menu, najeżdżamy np. na "Klasyki NES" i chcę żeby "Contra", "Mario Bros" i dwie pozostałe gry miały inną czcionkę czy inny background color.
Szukałem w Google, próbowałem ale nie mogę znaleźć sposobu.

Z góry dzięki za pomoc. :)

Answer 1

Jeśli chcesz aby konkretna/e listy miały inne atrybuty CSS to użyj selektorów :nth-child( <numer dziecka> ) lub :first-child/:last-child:

https://css-tricks.com/almanac/selectors/n/nth-child/

https://css-tricks.com/almanac/selectors/f/first-child/

https://css-tricks.com/almanac/selectors/l/last-child/

Comments

Niestety próbowałem już wiele wariantów tego sposobu i zwykle kończyło się tym że zmieniała się czcionka np. 3 dziecka w każdej rozwijanej liście.

Albo zmieniała się np. tylko czcionka (wielkość) w całej liście wraz z tytułem czyli Klasyki NES oraz cała rozwijana lista.

A ja chcę żeby tylko ta lista miała zmienioną czcionkę, bez "Klasyki NES".

---

O to Ci chodzi?

W 192 linijce pliku CSS z tamtego odcinka kursu zapisz tak:

ol > li:nth-child(2) > ul > li
{
	background-color:#cf6969;
	position: relative;
	z-index: 100;
	border-top: 1px dashed #751b1b;
	background:white;	
}

[EDIT]

Sorki, Tobie chodziło o zmianę wielkości czcionki :)

 

To zamień background: white na np. font-size: 30px; (czyli ile chcesz).

Answer 2

Nie oglądałem ale jak się domyślam może Ci chodzić o podobne rozwiązanie do tego:

Ustawiasz domyślną czcionkę dla selektora, zmieniasz dla tego na który się najedzie
Nie wiem jak wygląda tam "struktura" ale pewnie dostaniesz się jakoś tak:
 

nav li a{
font:...
}
nav li:hover a{
font:...zmiana
}

hover oznacza zmiany po najechaniu myszką na selektor (obiekt <li></li> listy w tym przypadku), możesz zmienić na a:hover wtedy będzie działać po najechaniu na <a></a>