FavIcon für Lesezeichen setzten, die "Düsseldorf" im Namen haben?

harff182

Ich hab 'ne Menge Lesezeichen, die nur den stilisierten Globus zeigen, weil die Webseite kein Favicon mitliefert.

Das ist z.B. AFAICS bei der "Landeshauptstadt Düsseldorf" so.

Ich kenne bisher diesen Weg, den lesezeichen in meinen diversen Ordnern ein Icon zuzuweisen:

CSS

 /* Terminvereinbarungen - Landeshauptstadt Düsseldorf */
.bookmark-item[label="Terminvereinbarung"] > image,
.bookmark-item[label="Terminvereinbarung"] > .menu-iconic-left {
    display: none!important;
}

.bookmark-item[label="Terminvereinbarung"] {
    -moz-appearance: none !important;
    background: url('../icons/ddorf16.png') no-repeat !important; 
    padding-left: 41px !important;
    background-size: 16px !important; 
    background-position-x: 16px !important; 
    background-position-y: 0.5px !important;
}

Alles anzeigen

Andere Themen haben natürlich eine komplette Bezeichnung(wie in dem Kommentar) im "label", die ich hier für das Beispiel extra gekürzt habe.

Gibt es im CSS eine Möglichkeit, sowas wie eine "wildcard" mit "Düsseldorf" zu benutzen?

Quasi sowas wie label="#?Düsseldorf#?" und dann alle auf einen Streich zu erwischen?

Bitte nicht zu laut wegen falscher Wortwahl auflachen, ich bin im Coden schon lange nich mehr drin :blushing:

Sören Hentzschel

[label*="Düsseldorf"]

BrokenHeart

Statt = -> ~= benutzen.

.bookmark-item[label~="Düsseldorf"]

Sören Hentzschel

Mit ~= würden allerdings nur exakte Treffer gefunden, "Düsseldorfer Spezialitäten" beispielsweise nicht.

BrokenHeart

Zitat von Sören Hentzschel

Mit ~= würden allerdings nur exakte Treffer gefunden, "Düsseldorfer Spezialitäten" beispielsweise nicht.

Ja stimmt, aber ich lass den Beitrag mal als optionales "Angebot" drin...

harff182

Uiuiuiuiui... hier werden sie geholfen

Danke Euch beiden, denn ich sehe für beide Wege Einsatzmöglichkeiten.

Vielleicht bietet sich mir damit sogar die Möglichkeit einer effizienteren, einheitlicheren (Unter-)Ordnerstruktur

Da hab ich ja die nächsten Wochen gut was zu tun...

milupo

Bei ~= muss Düsseldorf von Leerzeichen umgeben sein: „Spezialitäten von Düsseldorf und Umgebung“ würde gehen. Bei *= kann Düsseldorf irgendwo im Attributwert stehen.

bege

Super, danke euch für den neuen Tipp.

*=, ^= (Anfang des Strings) und $= (Ende des Strings) kannte ich schon,

~= ist mir neu.

Wegen

Zitat von Sören Hentzschel

Mit ~= würden allerdings nur exakte Treffer gefunden, "Düsseldorfer Spezialitäten" beispielsweise nicht.

wollte ich schon fragen, was der Unterschied zwischen ~= und = ist, hat aber milupo in #7 geklärt.

Sören Hentzschel

Ist ja nicht so, dass ich das in Beitrag #4 nicht bereits erklärt und du die Erklärung gerade sogar zitiert hättest… Es geht wie gesagt darum, dass der Suchbegriff exakt so vorkommen muss. Es ist übrigens nicht korrekt, dass der Suchbegriff von Leerzeichen umgeben sein muss.

bege

Zitat von Sören Hentzschel

Ist ja nicht so, dass ich das in Beitrag #4 nicht bereits erklärt und du die Erklärung gerade sogar zitiert hättest… Es geht wie gesagt darum, dass der Suchbegriff exakt so vorkommen muss. Es ist übrigens nicht korrekt, dass der Suchbegriff von Leerzeichen umgeben sein muss.

Den Unterschied hast du nicht erklärt. Mit ~= muss lt. deiner Aussage der exakte Suchbegriff vorkommen - mit = auch. Was ist dann der Unterschied, wenn milupo s Erklärung nicht stimmt?

Edit: So, hier https://www.w3schools.com/css/css_attribute_selectors.asp gleich noch 'was gelernt:

Bei ~= muss es sich um ein ganzes Wort handeln, das entweder allein oder von anderen durch ein Leerzeichen getrennt steht. Wenn es am Anfang oder Ende einer mit Leerzeichen getrennten Liste steht, muss also kein Leerzeichen davor bzw. dahinter stehen.

Auch für mich neu ist noch |=. Hierbei muss der Suchbegriff auch als ganzes Wort vorkommen, entweder allein oder aber durch einen Bindestrich vom nächsten getrennt.

harff182 17. Juni 2021 um 20:58