Mam menu oparte na UL/LI.
Kod wyglada tak:
<ul class="pmenu">
<li class="selected">POZYCJA 1</li>
<li>POZYCJA 2</li>
</ul>
CSS:
ul.pmenu li
{
background-color: #191919;
}
.selected
{
background-color: #666666;
}
Dlaczego POZYCJA 1 nie łapie stylu .selected?
Jak to poprawić?
To poprawne zachowanie i dotyczy tzw. szczegółowości (ang. specificity) selektorów. Jeśli masz zamiar pracować z CSS, KONIECZNIE o tym pogooglaj. To ekstremalnie ważny mechanizm!
Otóż pozycja deklaracji CSS w arkuszu stylów jest brana pod uwagę dopiero w drugiej kolejności. Ważniejsza jest szczegółowość selektora. Deklaracja (np. background-color: #191919), która ma większą szczegółowość dzięki selektorowi stojącego przy jej regule (ul.pmenu li) zawsze będzie nadpisywała tę, która ma mniejszą szczegółowość (.selected).
To dobry, korzystny mechanizm. Jeśli na końcu pliku CSS umieściłbyś regułę:
li {
background-color: red;
}
to bez brania pod uwagę szczegółowości nadpisałaby ona kolory tła WSZYSTKICH elementów listy na stronie.
Tymczasem ta reguła jest bardzo ogólna. Selektor mówi: niech "wszystkie elementy listy" mają taki kolor tła. A co powiesz na regułę z selektorem ul.pmenu li? Ta mówi o "wszystkich elementach listy, które są w liście z klasą pmenu". Tu już jesteśmy bardziej dokładni, bardziej szczegółowi, prawda? Więc jeśli w dwóch regułach masz deklaracje z tymi samymi własnościami (tu: background-color), to deklaracja z reguły o mniej szczegółowym selektorze zostaną nadpisane przez te z reguły o bardziej szczegółowym selektorze, niezależnie od położenia w arkuszu stylów. (Dopiero gdy szczegółowość jest ta sama, wygrają deklaracje umieszczone niżej).
Zwykle chcemy przecież, żeby nasze ogólne stwierdzenia były nadpisywane przez bardziej szczegółowe (takie jakby wyjątki!).
O obliczaniu szczegółowości poczytaj w necie.
W tym momencie podam Ci rozwiązanie.
Masz tam selektor .selected, czyli "dowolny element o klasie selected". To mniej szczegółowy selektor niż ul.pmenu li, czyli "dowolny element li w elemencie ul o klasie pmenu". Zmień więc selektor .selected na bardziej szczegółowy: ul.pmenu li.selected
PS. Warto też się nauczyć tych dosłownie kilku terminów typu selektor, deklaracja, reguła, żeby potem nie mówić "to coś" i "tamto coś".
Jestem Ci wdzięczny za wyczerpującą i rzetelną odpowiedź.
Przypadkiem rozwiązałem problem używając selektora ul#menu li, który jak się okazuje jest bardziej szczegółowy ;)
Zgodnie z Twoim zaleceniem biorę się do lektury na temat szczegółowości bo rzeczywiście jest to jedno z podstawowych zagadnień.
Pozdrawiam [browar]