Na pozór banalna sprawa jaką jest stylowanie linków w CSS3 czyli dopasowanie wyglądu linków według własnych preferencji może okazać się nie lada wyzwaniem. Najłatwiej ustalić styl dla linków używając prostego selektora (w tym wypadku link będzie niebieski), jednak rozwiązanie to niesie ze sobą potencjalny problem:

a { 
color: blue;
}

Jeżeli (dla powyższego przykładu) w trakcie pracy nad stroną okaże się, że jakiś jej element zawiera przynajmniej jeden link na niebieskim tle to zrobi się poważny problem ponieważ link zleje się z tłem i będzie niewidoczny. Rozwiązaniem tego problemu jest stylowanie linku w inny sposób.
Istnieją dwa sposoby na poradzenie sobie z tym problemem:

1) Pierwszy sposób to dokładne wskazanie linku
CSS: 

.inny_link > h4 > a {
color: white;
}

HTML:

<div class=”inny_link”>
<h4>
<a href=”#”>Testowy tekst</a>
</h4>
</div

2) Sposób drugi to umieszczenie klasy wewnątrz znacznika <a href>
CSS: 

a.inny_link:link, a.inny_link:visited, a.inny_link:active, a.inny_link:hover {
color: white;
}

HTML:

<div>
<h4>
<a href=”#” class=”inny_link”>Testowy tekst</a>
</h4>
</div>

Oba sposoby doprowadzą do tego samego efektu, czyli pomimo tego, że cała strona będzie miała linki niebieskie ten jeden link będzie biały. Dodatkowo w drugim przykładzie dodałem jeszcze dodatkowe opcje, które dają kontrole nad każdym ze stanów linków:

  • a:link – normalny link nieodwiedzony
  • a:visited – link odwiedzony przez użytkownika
  • a:hover – link po najechaniu na niego myszką
  • a:active – link w momencie jego kliknięcia

CSS3 stylowanie linków