1. ホーム
  2. css

[解決済み] CSSでitempropをターゲットにする?

2022-02-18 17:20:40

質問

Wordpressのテーマで生成された以下の2つのコードのセクションがあります。 この最初のセクションは、WPページ用に生成されたコードです。

    <div class="postinner">
        <div itemprop="name">
            <h1 class="pagetitle">My Title</h1>
        </div>
        <p>First line of text</p>
        <p>Second line of text</p>
    </div>

この2番目のセクションのコードは、WP Postのために生成されます。

    <div class="postinner">
        <article itemtype="http://schema.org/Article" itemscope="" role="article">
            <div itemprop="headline">
                <h1 class="pagetitle">Hello World!</h1>
            </div>
        </article>
    </div>

最初のセクションのコードの "itemprop DIV" 内の H1 タグのテキストを特にターゲットにして中央に配置する CSS セレクタがわかりません。

また、WP PostのH1タグをターゲットにして別の文字色でスタイル付けしたいのですが、これもCSSセレクタがわかりません。

どうすればいいですか?

などのCSS属性セレクタを使ってみてはいかがでしょうか。

div[itemprop="name"] h1 {
   color: red;
}

とします。

div[itemprop="headline"] h1 {
   color: yellow;
}

の例です。 http://jsfiddle.net/bEUk8/