Posttitel-Färbetest

Ziel war es, den Titel speziell dieses Posts anders als sonst üblich zu färben, dem ersten Buchstaben dann aber erneut eine andere Farbe zuzuweisen. Für den geöffneten Post, also den unverlinkten Posttitel geht das in dieser Vorlage genau wie in den älteren Layout-Vorlagen, nämlich so:

CSS

/* Den Titel des benannten Posts in unverlinkter Version umgefärbt */
a[name="3126906188158100395"] ~ h3.post-title {
color: red;
}
/* Den ersten Buchstaben im Titel des benannten Posts in unverlinkter Version umgefärbt */
a[name="3126906188158100395"] ~ h3.post-title:first-letter {
font-size: 150%;
color: #000000;
}

Die verlinkte Version des Posttitels ist in dieser Vorlage jedoch ganz anders eingebettet als in den älteren Layout-Vorlagen, weshalb die Kommandos, die ich da nutzte hier nicht so recht halfen. Ich kriegte den ersten Buchstaben zunächst nicht anders gefärbt und konnte das Rot bei :hover nicht halten.
Dank der Selektorenartikel von selfhtml.org habe ich aber die richtige Schreibweise gefunden, die auch hier den verlinkten Titel in jeder Art gezielt ansprechen kann, nämlich die:

CSS

/* Den Titel des benannten Posts in verlinkter Version umgefärbt */
a[name="3126906188158100395"] ~ h3.post-title a {
color: red;
}
/* Den Titel des benannten Posts in verlinkter Version auch bei :hover umgefärbt */
a[name="3126906188158100395"] ~ h3.post-title a:hover {
color: red;
}
/* Den ersten Buchstaben im Titel des benannten Posts in verlinkter Version umgefärbt */
a[name="3126906188158100395"]  ~ h3.post-title div.r-snippetized:first-letter {
font-size: 150%;
color: #000000;
}

Begeitinfo

Die Teile in den Code-Abschnitten, die mit /* beginnen und mit */ enden, sind übrigens Anmerkungen, wie man sie in CSS-Style-Abschnitte schreiben kann, ohne den Code zu stören oder im Blog angezeigt zu werden.

Ute Ziemes, 13021961.blogspot.de

,  31.03.2019