CSS: targeting itemprop

[_ash]

In einem Wordpress Theme habe ich folgenden Code:

Code: Alles auswählen

<h1 class="entry-title" itemprop="headline">What this is about</h1>

Ich würde gerne per CSS die Eigenschaften ändern. Mit

Code: Alles auswählen

.entry-header {
  font-family: serif;
}

kann ich zwar die Schrifart ändern, andere Attribute, wie zB die Farbe, lassen sich damit nicht ändern.

Wie kann ich 'itemscope' ansprechen? Habe es versucht mit

Code: Alles auswählen

h1[itemscope="headline"]

, funkioniert aber nicht.

[thoerb]

In einem Wordpress Theme habe ich folgenden Code:

Code: Alles auswählen

<h1 class="entry-title" itemprop="headline">What this is about</h1>

Ich würde gerne per CSS die Eigenschaften ändern. Mit

Code: Alles auswählen

.entry-header {
  font-family: serif;
}

Wieso entry-header, die CSS-Klasse der Überschrift ist doch entry-title?

[_ash]

Sorry, Tippfehler, die Klasse drüber heißt entry-header. In meinem Code steht es richtig drin.

[thoerb]

Mit solchen Wordpress-Problemen habe ich auch schon einige Zeit verbracht.

Hast du schon die Holzhammermethode, !IMPORTANT probiert?

https://developer.mozilla.org/de/docs/W ... fit%C3%A4t

[_ash]

Vielen Dank für den Tipp, !important funktioniert.

Gibt es eine elegantere Variante, oder läuft es schlicht darauf hinaus?

[thoerb]

So gut kenne ich mich mit Wordpress auch nicht aus. Wenn du die Möglichkeit hast über den entsprechenden Theme-Builder der Überschrift eine eigene css-Klasse zu geben, würde ich das versuchen.

Ansonsten gäbe es noch die Möglichkeit die Klasse über ein Child-Theme zu ändern. Aber das habe ich selbst auch noch nicht gemacht. Ich muss mich bald mal damit beschäftigen. Du kannst ja mal im Internet nach Child-Theme suchen. Aber vielleicht hat hier ja noch jemand eine Idee, wie man es besser machen kann.

[thoerb]

Ich habe mal von dem Twentyseventeen-Theme ein Child-Theme erstelllt.

Dann habe ich aus dem Twentyseventeen-Theme die Datei site-branding.php in mein Child-Theme kopiert:

Code: Alles auswählen

wordpress/wp-content/themes/twentyseventeen-child/template-parts/header/site-branding.php

Ich habe dort in der h1 Überschrift die Klasse site-title in thoerb-site-title geändert.

Jetzt kann ich die Überschrift in meiner style.css im Child-Theme verändern wie es mir gefällt:

Code: Alles auswählen

wordpress/wp-content/themes/twentyseventeen-child/style.css

Code: Alles auswählen

.thoerb-site-title a{
    color: red;
    font-size: 60px;
}