Ik ben constant bezig om mijn weblog over fotografie te verbeteren. Vandaag had ik weer een nieuw idee: bij elke uitgaande link wil ik een icoontje wat aangeeft dat het een externe link is. Daarvoor moet ik verschillende CSS selectors gebruiken om het gewenste doel te bereiken.
Na zoeken kwam ik op de volgende code uit:
a[href]:not([href*="maartenvandekamp.nl"])::afterWat deze code doet is zoeken naar het element href, een attribuut van a, en als de href GEEN (vandaar not() ) maartenvandekamp.nl bevat, dan moet er een icoontje achter. Maar hij pakte alle links waar geen maartenvandekamp.nl in zat, ook links die wel intern waren maar een href van /stel-een-vraag/ hadden.
Dat was niet de bedoeling.
Specifieker zijn
Ik moest specifieker zijn en aangeven in welke class hij deze selector uit moest voeren: de class .entry-content, waarin de tekst van het artikel staat en .comment-content, de class waarin de tekst van de reactie staat. Uiteindelijk is het de volgende code geworden:
.entry-content a[href]:not([href*="maartenvandekamp.nl"])::after,
.comment-content a[href]:not([href*="maartenvandekamp.nl"])::after {
font: normal 16px/1.75 'Genericons';
content: '\f442';
vertical-align: middle;
}Nu worden links netjes voorzien van een icoontje, op basis van Genericons, aan de link toegevoegd.