Kategorien
HTML/CSS

CSS und Regex

Reguläre in CSS zu schreiben ist einfacher als Sie denken. Auch wenn Sie bisher noch keine regulären Ausdrücke verwendet haben, können Sie diese Art der Auswahl trotzdem problemlos beherrschen und lernen nebenher noch etwas Regex.

Anzeige

PDF-Dateien enden normalerweise mit “.pdf”, sofern sie nicht dynamisch generiert wurden. Mit dem folgendem CSS-Trick, können Sie jedem PDF-Link auf Ihrer Website ein PDF-Symbol hinzufügen.

Das Attribut, nach dem ich in diesem Fall suche, ist href und sein Wert endet mit “.pdf”.

a[href$='.pdf']{
 /* apply icon */
}

In regulären Ausdrücken markiert “$” das Ende eines Strings. In CSS haben wir es also verwendet, um zu sagen, dass wir nur alle Links formatieren möchten, die mit “.pdf” enden.

Ein weiteres Zeichen für reguläre Ausdrücke, das sehr häufig verwendet wird, ist das Zeichen “^”. Es kennzeichnet den Anfang einer Zeichenfolge. Verwenden wir dieses Zeichen, um Links mit dem Protokoll “https” zu formatieren.

a[href^='https']{
/*style*/
}

Was wäre, wenn Sie alle PHP-Links formatieren möchten? Sie überlegen wahrscheinlich, das “$” zu verwenden, das ich Ihnen gezeigt habe, da dies das Ende eines Strings markiert und Sie es für Erweiterungen verwenden können. Denken Sie jedoch daran, dass PHP-Links möglicherweise Parameter enthalten, sodass sie möglicherweise nicht mit der Erweiterung enden. Wir müssen das Sternchen “*” verwenden, das Sternchen wird verwendet, um irgendwo in der Zeichenfolge nach einer bestimmten Zeichenfolge zu suchen und nicht nur am Anfang oder Ende.

Anzeige
a[href*='.php']{
/* styles here */
}

Sie können Regex auf andere Arten von Tags anwenden, nicht nur auf Ankertags. Wenn Sie mehr über reguläre Ausdrücke in CSS und weitere Arten von Selektoren erfahren möchten, lesen Sie diesen Beitrag: Diese 5 Selektoren solltest Du kennen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.