Selektory#

Pseudokalsa hiperłącza lokalnego (wariant funkcyjny)#

  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 pod kątem pochodzenia i określonej ilości poziomów.

Pseudoklasa :local-link(), w przeciwieństwie do :local-link, jest typu funkcyjnego, dlatego też jako argument może przyjmować nieujemną liczbę całkowitą, która, jeśli adres URL dokumentu należy do hierarchicznego schematu # (hierarchical scheme), wskazuje ilość poziomów do dopasowania:

Pseudoklasa hiperłącza lokalnego (wariant funkcyjny) pozwala zatem odróżnić, na podstawie aktualnej lokalizacji, wewnętrzne odsyłacze z pewną częścią w adresie od wewnętrznych odsyłaczy z inną częścią w adresie. Szczególnie przydatny może być zapis :local-link(0), który pozwala wybierać odsyłacze w oparciu o domenę, przez co odsyłaczom spoza naszej witryny możemy przypisać odrębne style. W przeszłości zachowanie to można było uzyskać za pomocą mieszanki DOM i JS, z czego sam osobiście korzystam na tej stronie.

Segmenty ścieżki # (path segments) to części w ścieżce URL, które są rozdzielone znakami ukośnika (U+002F, /). Jeśli brakuje segmentu w adresie URL dokumentu, to pseudoklasa wymagająca tego segmentu niczego nie dopasuje.

Pochodzenie # (origin) adresu URL jest definiowane przez dokument "RFC 6454". Części będące nazwą użytkownika, hasłem, zapytaniem tekstowym (query string) lub identyfikatorem fragmentu nie są brane pod uwagę przy porównywaniu. Jeśli adres URL dokumentu nie należy do hierarchicznego schematu, to pseudoklasa :local-link() nie wybierze niczego.

Całość najlepiej wyjaśnić na teoretycznym przykładzie. Tak więc, wprowadzając następujące odsyłacze:

  1. <a href="http://www.example.com">Home</a>
  2. <a href="http://www.example.com/2011">2011</a>
  3. <a href="http://www.example.com/2011/03">March</a>
  4. <a href="http://www.example.com/2011/03/">March</a>
  5. <a href="http://www.example.com/2011/03/21">21 March</a>
  6. <a href="https://www.example.com/2011/03/">March</a>
  7. <a href="http://example.com/2011/03/">March</a>

i reguły CSS:

  1. a:local-link {...}
  2. a:local-link(0) {...}
  3. a:local-link(1) {...}
  4. a:local-link(2) {...}
  5. a:local-link(3) {...}
  6. a:local-link(4) {...}

To w przypadku dokumentu z adresem "http://www.example.com/2011/03/" otrzymamy:

  1. Link 1 otrzyma Styl B.
  2. Link 2 otrzyma Styl B i Styl C.
  3. Link 3 otrzyma Styl B, Styl C i Styl D.
  4. Link 4 otrzyma Styl A, Styl B, Styl C, Styl D i Styl E.
  5. Link 5 otrzyma Styl B, Styl C i Styl D.
  6. Link 6 nie otrzyma żadnych stylów.
  7. Link 7 nie otrzyma żadnych stylów.
  8. Styl F w ogóle nie będzie używany.

Jasnym jest, że jeśli adres URL dokumentu ma co najmniej N segmentów, to pseudoklasa :local-link(N) wybiera jedynie odsyłacze, których adres URL ma co najmniej N segmentów. Wciąż trwa dyskusja, co w przypadku adresu URL dokumentu z mniejszą liczbą segmentów niż N i odsyłaczem będącym tą samą stroną. Czy "brak segmentu" traktować jak dopasowanie, czy nie?

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(0) background-color: black;
		:local-link(1) background-color: blue;
		:local-link(2) background-color: aqua;
		:local-link(6) background-color: white;		/* brak zastosowania */

	</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">http://www.crimsteam.site90.net</a></li>
		<li><a href="http://www.crimsteam.site90.net/pliki/reszta">http://www.crimsteam.site90.net/pliki/reszta</a></li>
		<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</a></li>
		<li><a href="../../../../index.html">Strona startowa</a></li>
		<li><a href="">Aktualnie wczytana strona</a></li>
		<li><a href="bldadsfkjdsa">Błędny adres strony </a></li>
	</ul>

	<ul>
		<li><a href="https://www.crimsteam.site90.net">https://www.crimsteam.site90.net (szyfrowane połączenie)</a></li>
		<li><a href="http://crimsteam.site90.net">http://crimsteam.site90.net (brak "www" w adresie)</a></li>
		<li><a href="http://www.google.com">www.google.com (inna domena)</a></li>
		<li><a href="http://www.w3.org">www.w3.org (inna domena)</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 funkcyjny) (H2) Specyfikacje i inne materiały (H3)