Przeglądasz zaktualizowaną wersję artykułu.

piątek, 2020-10-30

Zmiana koloru punktora listy

Jedyna dostępna w języku CSS przed implementacją CSS3 w przeglądarkach możliwość zmiany koloru punktora ciągnie za sobą zmianę tej własności dla całej zawartości znacznika. Jeśli kolor punktora ma być inny niż kolor tekstu, powstaje mały problem, ale ostatecznie jego rozwiązanie jest bardzo proste. Wystarczy zastosować nadmiarowy element, którym zostanie umieszczony tekst. W prezentowanym przykładzie jest to znacznik <span>, jednak może to być także np. <p>, <div> itd. Po tej modyfikacji wystarczy zmienić kolor w obrębie całej listy, a następnie wprowadzić odmienną regułę CSS dla elementów <span> wewnątrz listy. Poniżej znajdziesz właściwy kod i prezentację efektu.

<h2>Podział trójkątów ze względu na kąty</h2>
<ul>
	<li><span>trójkąt ostrokątny;</span></li>
	<li><span>trójkąt prostokątny;</span></li>
	<li><span>trójkąt rozwartokątny.</span></li>
</ul>

ul {
  color: #a00;
}

ul span {
	color: #343434;
}