Eigene CSS Ausnahme-Klasse einfügen

156 0 0 Thomas Fischer  4. März 2024

Folgende Situation: Ein Fremdsystem wie unser Wiki bringt eigene CSS Klassen mit. Um es homogen in unser Theme einzubinden, übernimmt es automatisch die Theme übergreifenden Standards und vererbt diese entsprechend. Die Wiki-eigenen-Klassen sind an manchen Stellen entweder für das Eingreifen ungeeignet, ohne wichtige Wiki-Layouts unleserlich zu machen, oder es wird das CSS vom Theme beeinträchtigt. Als Beispiel unser Wiki Header. Hier gibt es z. B. den Link „Linkliste“. Hier einen sichtbaren Link anzuzeigen, ohne die anderen Klassen unbrauchbar zumachen ist nicht ohne Weiteres konfliktfrei möglich.

Mit einem Attribut-Selektor und Pseudoklassen gelingt es aber dennoch.

.bpress-wrap .bpress-page-header .bpress-content-wrap a[href^="https://smart-in.one/wiki/linkliste/"] {
      text-decoration: underline; color: #ffffff;
}
.bpress-wrap .bpress-page-header .bpress-content-wrap a:hover[href^="https://smart-in.one/wiki/linkliste/"] {
      text-decoration: underline; color: #66d1d9 !important;
}

Jetzt erscheint der Link in korrekter Farbe und Funktion im Header, ohne andere Darstellungen zu beeinträchtigen.

Als Attribut-Selektor ist die Link-URL selbst gut geeignet, da dieses Attribut eindeutig und individuell ist und nur an dieser Stelle vorkommt. So kann der Browser die identifizierte Position durch individuelles CSS entsprechend anpassen.

Weiterführende Informationen unter:

https://www.mediaevent.de/css/css-selektor-attributselektor.html#

Was this helpful?