Kurs HTML

Wprowadzenie: Wybieranie na podstawie fragmentów wartości atrybutów

W rozdziale o podstawowych selektorach poznaliśmy selektory atrybutów, takie jak [attr] (sprawdza istnienie atrybutu) i [attr="value"] (sprawdza dokładną wartość atrybutu).

CSS oferuje również bardziej zaawansowane selektory atrybutów, które pozwalają wybierać elementy na podstawie **fragmentów** wartości ich atrybutów. Są one szczególnie przydatne, gdy wartości atrybutów mają pewien wzorzec, np. zaczynają się od określonego ciągu znaków, kończą się nim, lub go zawierają.

Selektor atrybutu zaczynającego się od... ([attr^="value"])

Selektor [attr^="value"] (ang. attribute begins with selector) wybiera elementy, których wartość atrybutu attr **zaczyna się** od podanego ciągu znaków value.

Symbol ^ (daszek) oznacza początek ciągu.

<a href="https://www.example.com">Link zewnętrzny (bezpieczny)</a>
<a href="https://otherdomain.net">Inny link zewnętrzny (bezpieczny)</a>
<a href="http://insecure.com">Link zewnętrzny (niebezpieczny)</a>
<a href="/internal/page.html">Link wewnętrzny</a>

/* Wybierz linki (a), których atrybut href zaczyna się od "https://" */
a[href^="https://"] {
  color: green;
  /* Dodaj ikonkę bezpiecznego połączenia */
  padding-right: 20px;
  background: url('secure-icon.png') no-repeat right center;
  background-size: 16px 16px;
}

/* Wybierz linki (a), których atrybut href zaczyna się od "http://" */
a[href^="http://"] {
  color: red;
}

W powyższym przykładzie, pierwsze dwa linki zostaną ostylowane na zielono z ikonką, ponieważ ich href zaczyna się od "https://". Trzeci link będzie czerwony, a czwarty (wewnętrzny) pozostanie bez zmian.

Selektor atrybutu kończącego się na... ([attr$="value"])

Selektor [attr$="value"] (ang. attribute ends with selector) wybiera elementy, których wartość atrybutu attr **kończy się** na podany ciąg znaków value.

Symbol $ (dolar) oznacza koniec ciągu.

<a href="dokument.pdf">Pobierz PDF</a>
<a href="/sciezka/do/prezentacja.pdf">Inny PDF</a>
<a href="obrazek.jpg">Zobacz obrazek</a>
<a href="archiwum.zip">Pobierz archiwum</a>

/* Wybierz linki (a), których atrybut href kończy się na ".pdf" */
a[href$=".pdf"] {
  font-weight: bold;
  /* Dodaj ikonkę PDF */
  padding-left: 22px;
  background: url('pdf-icon.png') no-repeat left center;
  background-size: 18px 18px;
}

/* Wybierz linki (a), których atrybut href kończy się na ".zip" */
a[href$=".zip"] {
  color: brown;
}

W tym przykładzie, pierwsze dwa linki (do plików PDF) zostaną pogrubione i otrzymają ikonkę PDF. Link do archiwum będzie brązowy, a link do obrazka pozostanie bez zmian.

Selektor atrybutu zawierającego... ([attr*="value"])

Selektor [attr*="value"] (ang. attribute contains selector) wybiera elementy, których wartość atrybutu attr **zawiera** podany ciąg znaków value w dowolnym miejscu.

Symbol * (gwiazdka) oznacza dowolne miejsce w ciągu.

<div class="warning message important">Ważne ostrzeżenie</div>
<div class="info message">Zwykła informacja</div>
<div class="error important">Krytyczny błąd</div>
<div class="message">Po prostu wiadomość</div>

/* Wybierz elementy, których atrybut class ZAWIERA słowo "important" */
[class*="important"] {
  border: 2px solid red;
  background-color: lightpink;
}

/* Wybierz elementy, których atrybut class ZAWIERA słowo "message" */
[class*="message"] {
  padding: 10px;
  margin-bottom: 5px;
}

W tym przykładzie:

• Pierwszy i trzeci div otrzymają czerwoną ramkę i różowe tło, ponieważ ich atrybut class zawiera "important".
• Pierwszy, drugi i czwarty div otrzymają padding i margines, ponieważ ich atrybut class zawiera "message".

Uwaga: Selektor [attr*="value"] jest potężny, ale może być mniej wydajny niż ^= i $=, ponieważ wymaga przeszukania całego ciągu wartości atrybutu. Należy go używać rozważnie, zwłaszcza w dużych dokumentach.