Selektory#

Pseudokalsa hiperłącza lokalnego (wariant niefunkcyjny)#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
: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. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
Aktualny adres dokumentu
http://www.crimsteam.site90.net/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. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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://www.crimsteam.site90.net/pliki/ogolne/js/edytoronline/edytoronline.htm">http://www.crimsteam.site90.net/pliki/ogolne/js/edytoronline/edytoronline.htm (odsyłacz wewnętrzny)</a></li>
		<li><a href="http://www.crimsteam.site90.net/pliki/ogolne/js/edytoronline/edytoronline.htm#fragment">http://www.crimsteam.site90.net/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://www.crimsteam.site90.net">http://www.crimsteam.site90.net (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)