Stylowanie wybranych linków w css – jak zmienić wygląd niektórych rodzajów linków

W poprzednim wpisie: stylowanie linków za pomocą pseudoklas opisałam, jak można zmienić kolor linków aktywnych, klikniętych lub hoverowanych. Teraz pokażę, jak można zmienić styl wybranych odsyłaczy, np. tylko tych, które prowadzą do plików PDF.

Załóżmy, że na naszej stronie mamy kilka linków. Część z nich prowadzi do innych stron, a część do plików PDF. Chcemy zmienić wygląd tylko tych linków, które prowadzą do plików PDF. Możemy to zrobić dodając odpowiednią klasę do każdego linku w HTML, ale możemy też zrobić to szybciej, używając znacznika a[href=”cos”] w css.

.html

<div>
	<a href="https://love-coding.pl/pytania-rekrutacyjne/pl/">link do strony</a><br>
	<a href="https://love-coding.pl/pytania-rekrutacyjne/basic_git_commands_pl.pdf">link do pliku PDF</a><br>
	<a href="https://love-coding.pl/pytania-rekrutacyjne/pl/">link do strony</a><br>
	<a href="https://love-coding.pl/pytania-rekrutacyjne/basic_git_commands_en.pdf">link do pliku PDF</a><br>
	<a href="https://love-coding.pl/pytania-rekrutacyjne/pl/">link do strony</a><br>
</div>

.css

a[href$=".pdf"] {
     background: url("https://love-coding.pl/repo/parrot/pdf-icon-20.png") 
     0 50% no-repeat; 
     padding-left: 20px;
     color: blue;
 }

Operator $= oznacza, że wybieramy wszystkie adresy linków, które kończą się podaną przez nas nazwą: „.pdf”.

W efekcie dla wszystkich linków odsyłających do PDF uzyskaliśmy specyficzny wygląd: niebieski kolor linków oraz ikonkę PDF wstawioną przed linkiem:

Na tej samej zasadzie możemy zmienić kolor linków, które prowadzą do konkretnej strony, np. do facebooka czy youtuba:

<div>
	<a href="https://www.youtube.com/channel/UCz5Ed7-7pEfCAuxbs-3WIdA">link do youtube</a><br>
</div>

a[href*="youtube"] {
     color: red;
 }

Efekt:

Podobnie, odmienne style ustawić można też dla wybranych obrazków:

<img src="https://love-coding.pl/repo/parrot/pdf-icon-100.png">

img[src*="icon"] {
  border: 2px solid gray;
}