Kurs HTML

Wprowadzenie: Stylizowanie celu linku wewnętrznego

Linki wewnętrzne na stronie często prowadzą do konkretnych sekcji lub elementów, używając identyfikatora fragmentu (znaku # i ID elementu) w adresie URL, np. index.html#sekcja2.

Pseudoklasa :target pozwala wybrać i ostylować element, którego ID **odpowiada aktualnemu identyfikatorowi fragmentu w adresie URL** strony.

Gdy użytkownik kliknie link prowadzący do #jakis-id, element z id="jakis-id" staje się celem (target) i pasuje do selektora :target.

Jak działa :target?

Kiedy adres URL strony zawiera identyfikator fragmentu (np. www.example.com/page.html#info), przeglądarka:

1. Przewija stronę tak, aby element z pasującym ID (id="info") znalazł się u góry okna (lub jak najbliżej).
2. Nadaje temu elementowi stan :target.

Jeśli adres URL nie zawiera identyfikatora fragmentu lub żaden element na stronie nie ma ID pasującego do fragmentu, żaden element nie będzie pasował do :target.

<nav>
  <a href="#section1">Do Sekcji 1</a> | 
  <a href="#section2">Do Sekcji 2</a> | 
  <a href="#">Usuń target</a> <!-- Link do # usuwa stan :target -->
</nav>

<div style="height: 500px; border: 1px dashed lightgray; margin-top: 20px; padding: 10px;">
  Przewiń w dół...
</div>

<section id="section1" class="target-section">
  <h2>Sekcja 1</h2>
  <p>To jest treść sekcji 1.</p>
</section>

<section id="section2" class="target-section">
  <h2>Sekcja 2</h2>
  <p>To jest treść sekcji 2.</p>
</section>Kopiuj

.target-section {
  padding: 20px;
  margin-bottom: 20px;
  border: 2px solid #ccc;
  background-color: #f9f9f9;
  transition: background-color 0.5s ease; /* Płynne przejście dla tła */
}

/* Styl dla sekcji, która jest aktualnym celem (:target) */
.target-section:target {
  background-color: lightyellow;
  border-color: orange;
}

/* Można też stylizować konkretny element, gdy jest celem */
#section1:target h2 {
    color: darkorange;
}
Kopiuj

Wypróbuj: Kliknij linki "Do Sekcji 1" i "Do Sekcji 2". Zauważ, jak zmienia się adres URL (dodawany jest #section1 lub #section2) i jak odpowiednia sekcja zmienia tło i kolor ramki. Kliknięcie "Usuń target" (lub linku bez #) przywróci domyślny styl.

Praktyczne zastosowania :target

• Podświetlanie aktywnej sekcji: Jak w przykładzie powyżej, można wizualnie wyróżnić sekcję, do której użytkownik właśnie przeszedł.
• Tworzenie prostych zakładek/akordeonów bez JavaScript: Można pokazywać/ukrywać treść w zależności od tego, który link został kliknięty.
• Wyświetlanie modalnych okienek (lightboxów): Kliknięcie linku może ustawić :target na ukrytym elemencie (np. div z oknem modalnym), a reguła CSS dla :target może zmienić jego display na block lub flex, aby go pokazać.

Przykład: Prosty akordeon z :target

<div class="accordion">
  <div class="accordion-item">
    <a href="#item1" class="accordion-title">Pytanie 1</a>
    <div id="item1" class="accordion-content">
      <p>Odpowiedź na pytanie 1...</p>
      <a href="#">Zamknij</a>
    </div>
  </div>
  <div class="accordion-item">
    <a href="#item2" class="accordion-title">Pytanie 2</a>
    <div id="item2" class="accordion-content">
      <p>Odpowiedź na pytanie 2...</p>
      <a href="#">Zamknij</a>
    </div>
  </div>
</div>Kopiuj

.accordion-content {
  display: none; /* Domyślnie ukryj treść */
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: -1px; /* Aby ramki się ładnie łączyły */
}

.accordion-title {
  display: block;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-decoration: none;
  color: black;
}
.accordion-title:hover {
    background-color: #ddd;
}

/* Pokaż treść, gdy jej ID jest celem (:target) */
.accordion-content:target {
  display: block;
}
Kopiuj

W tym przykładzie, kliknięcie tytułu (linku) rozwija odpowiednią treść, ponieważ nadaje jej stan :target, co zmienia jej display z none na block. Kliknięcie "Zamknij" (link do #) usuwa stan :target i zwija treść.