Linkkejä
Kurssin kotisivu
Jyväskylän yliopisto
MDN
Ohje PDF-muodossa
Lähetä sähköpostia
Tärkeä sisäinen sivu
Linkit ovat esimerkkejä valitsimia varten eivätkä johda mihinkään.
CSS
/* Attribuutti on olemassa, arvolla ei väliä. */ a[hreflang] { background-color: #eef1f7; } /* Attribuutin arvo on täsmälleen tämä. */ a[hreflang="en"]::after { content: " (englanniksi)"; font-size: 0.85em; color: #5d574e; } /* Arvo alkaa näillä merkeillä. */ a[href^="https://"] { font-weight: bold; } /* Arvo päättyy näihin merkkeihin. */ a[href$=".pdf"]::after { content: " [PDF]"; color: #b3261e; } /* Arvo sisältää nämä merkit missä tahansa kohtaa. */ a[href*="jyu.fi"] { color: #7a3b12; } /* Välilyönnillä erotellussa arvolistassa on tämä sana. Osuu luokkaan "tarkea uusi", koska sana tarkea on listassa. */ a[class~="tarkea"] { text-decoration: underline wavy; } /* Kirjainkoosta riippumaton vertailu: i ennen sulkevaa hakasulkua. */ a[href$=".PDF" i] { font-style: italic; }
HTML
<h3>Linkkejä</h3> <ul> <li><a href="https://appro.mit.jyu.fi/itkp1011/">Kurssin kotisivu</a></li> <li><a href="https://www.jyu.fi/" hreflang="fi">Jyväskylän yliopisto</a></li> <li><a href="https://developer.mozilla.org/" hreflang="en">MDN</a></li> <li><a href="ohje.pdf">Ohje PDF-muodossa</a></li> <li><a href="mailto:nobody@example.invalid">Lähetä sähköpostia</a></li> <li><a href="sivu.html" class="tarkea uusi">Tärkeä sisäinen sivu</a></li> </ul> <p>Linkit ovat esimerkkejä valitsimia varten eivätkä johda mihinkään.</p>
Javascript
Konsoli