Einzelne Post-Titel in Übersichten von Classic, Magazine, Timeslide individuell färben

Unter den Ansichten Classic, Magazine, Timeslide stehen die Posts oder Postausschnitte mit ihren Titeln auf der Startseite und anderen Übersichtsseiten (Label, Posts eines Monats/Jahres) innerhalb von Listenpunkten, die eine ID haben. Die ID steht nicht an einer Stelle, die man üblicherweise als Selektor nutzen kann, aber mit Hilfe einer eckigen Klammer kann man aus dem entsprechenden HTML-Schnipsel einen Selektor machen. So kann man die einzelnen Post-Titel per CSS ansprechen.

---

Den HTML-Schnipsel, den man in eckige Klammern setzen muss, damit er als Selektor, also als Bereich, für den man CSS-Kommandos geben kann, genutzt werden kann, findet man im Quelltext nahe über dem entsprechenden Post-Titel in der öffnenden li-Klammer

Beispiel:

<li class="item" data-id="1234567891234567891">

Der Schnipsel, der daraus relevant ist, ist der:

data-id="1234567891234567891"

Unter Vorlage > Anpassen > Erweitert > CSS hinzufügen kann man mit Hilfe dieses Schnipsels nun das Schriftfarb-Kommando für den dazu gehörenden Post-Titel geben:

/* Übersichten Classic, Magazine, Timeslide: Ersten Post-Titel vom 16.01.2014 rot gefärbt */
li[data-id="1234567891234567891"] .title a {
color:#FF0000;
}

Man muss den Text zwischen /* und */ für sich passend ändern, er ist dafür da, dass man später noch weiß, für welchen Post-Titel das Kommando gilt. Text, den man zwischen /* und */ stellt, darf so im CSS stehen. Auch ID-Nummer und Farbcode muss man selbstverständlich gegen die eigenen austauschen.

Fachlicher Hinweis:

data-id="1234567891234567891" ist hier ein Attribut des Listenpunkts (li), in dem es steht. Durch die eckige Klammer wird es im CSS zu einem Selektor, so als handele es sich um einen Klassennamen für den li oder um den direkten id-Namen des li. Weil das Attribut nur in diesem Listenpunkt vorkommt, wird auch nur dieser über das entsprechende CSS-Kommando angesprochen.

Weiterführende Links dazu:

• stackoverflow.com/questions/19778151/targetting-itemprop-in-css
  Hier hatte ich die Anregung zum hiesigen Thema her. Da wird beschrieben, wie man itemprop-Attribute mit Hilfe der Klammern zu Selektoren machen kann. Daraufhin habe ich ausprobiert, mit welchen Einträgen im HTML, die mir nützen könnten, das eventuell ebenfalls geht und data-id als einen solchen ausfindig gemacht.


• Draufhin habe ich mich erstmals mit allen Arten von Selektoren beschäftigt, die ich bis dahin in ihrer neuen Vielfalt noch gar nicht recht wahrgenommen hatte. Was es da alles gibt. Manch CSS-Kommando sieht aus und ist zurechtgebastelt, als wäre es Teil eines Scripts und ersetzt ein solches tatsächlich. Das hatte ich in einem Quelltext schon mal gesehen und damals nicht begriffen. Und ich freue mich, dass ich es nun zuordnen kann. Eine Übersicht über Selektoren: wiki.selfhtml.org/wiki/CSS/Selektoren

Ute Ziemes, sg.utez.de, 2014-01-16, Änderung: 2016-02-07