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/blog/cwiczenia/img/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:

link do strony
link do pliku PDF
link do strony
link do pliku PDF
link do strony


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:

link do youtube


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

<img src="https://love-coding.pl/blog/cwiczenia/img/pdf-icon-100.png">
img[src*="icon"] {
  border: 2px solid gray;
}