Selektory#

Pseudokalsa hiperłącza lokalnego (wariant niefunkcyjny)#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:local-link { /* deklaracje */ }

Pseudoklasa :local-link reprezentuje elementy, które są hiperłączami z bezwzględnymi adresami URL pasującymi do aktualnego adresu URL dokumentu. Wszelkie identyfikatory fragmentów (część za znakiem #) są usuwane przed dopasowaniem adresu dokumentu i adresu hiperłącza; w pozostałych przypadkach wszystkie części adresu URL są istotne.

Pseudoklasa hiperłącza lokalnego (wariant niefunkcyjny) pozwala zatem odróżnić, na podstawie aktualnej lokalizacji, wewnętrzne odsyłacze w danym dokumencie od odsyłaczy prowadzących poza dokument (nawet w obrębie tej samej domeny). W przeszłości zachowanie to można było uzyskać za pomocą mieszanki DOM i JS.

Najlepiej przeanalizować prosty przykład teoretyczny. Załóżmy, że mamy do czynienia z następującą sytuacją:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
Aktualny adres dokumentu
http://webref.pl/arena/start/start_literatura.html

Reguła CSS
nav :local-link { text-decoration: none; }

Powyższa reguła zapobiega podkreślaniu odsyłaczy należących do bieżącej strony, gdy są one częścią elementu nawigacji. Będzie dotyczyła wszystkich wewnętrznych hiperłączy danej strony, czyli np. odsyłaczy z adresami:

Przypominam tylko, że adresy względne są automatycznie rozwijane do postaci bezwzględnej, dlatego trzy ostatnie przypadki powyższego przykładu także pasują do pseudoklasy :local-link.

W przypadku większych wymagań filtrujących, gdzie istotne jest porównanie domeny lub poszczególnych części adresu, należy skorzystać z pseudoklasy :local-link().

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		:link {color: red;}
		:visited {color: green;}

		:local-link {background-color: black;}

	</style>

</head>

<body lang="pl">

	<p>Stylizacja poniższych odsyłaczy zależy od ich pochodzenia, części składowych oraz stanu odwiedzin.</p>

	<ul>
		<li><a href="http://webref.pl/pliki/ogolne/js/edytoronline/edytoronline.htm">http://webref.pl/pliki/ogolne/js/edytoronline/edytoronline.htm (odsyłacz wewnętrzny)</a></li>
		<li><a href="http://webref.pl/pliki/ogolne/js/edytoronline/edytoronline.htm#fragment">http://webref.pl/pliki/ogolne/js/edytoronline/edytoronline.htm#fragment (odsyłacz wewnętrzny)</a></li>
		<li><a href="#fragment2"> Odsyłacz z atrybutem href="#fragment2" (odsyłacz wewnętrzny)</a></li>
		<li><a href="">Aktualnie wczytana strona (odsyłacz wewnętrzny)</a></li>
	</ul>

	<ul>
		<li><a href="http://webref.pl">http://webref.pl (odsyłacz zewnętrzny z tym samym pochodzeniem)</a></li>
		<li><a href="bldadsfkjdsa">Błędny adres strony (odsyłacz zewnętrzny z tym samym pochodzeniem)</a></li>
		<li><a href="http://www.google.com">http://www.google.com (odsyłacz zewnętrzny z innym pochodzeniem)</a></li>
		<li><a href="http://www.w3.org">http://www.w3.org (odsyłacz zewnętrzny z innym pochodzeniem)</a></li>
	</ul>

</body>

</html>

Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :local-link.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa hiperłącza lokalnego (wariant niefunkcyjny) (H2) Specyfikacje i inne materiały (H3)