Таргетинг itemprop в CSS?

У меня есть следующие два раздела кода, сгенерированные темой Wordpress. Этот первый раздел кода создается для страницы 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>

Эта вторая секция кода создается для 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>

Я не могу определить селектор CSS, чтобы специально настроить и центрировать текст тега H1 внутри "itemprop DIV" для первого раздела кода.

Кроме того, я также хотел бы настроить и стилизовать тег H1 в WP Post с другим цветом текста, но опять же, не могу определить селектор CSS.

Ответы

Ответ 1

Вы можете попробовать использовать селектор атрибутов CSS, например:

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

и

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

пример: http://jsfiddle.net/bEUk8/

Ответ 2

Селектор [att=val] (как предложенный Стюартом Кершоусом) работает, если атрибут itemprop имеет только этот токен как значение.

Но атрибут itemprop может иметь несколько токенов как значение, и в этом случае [att=val] больше не будет соответствовать.

Итак, вы можете использовать [att~=val] селектор, который соответствует в обоих случаях: если это единственный токен или его один из нескольких токенов.

Пример

Хотя оба элемента span имеют токен name как значение itemprop, только первое соответствует правилу CSS с селектором [itemprop="name"]:

[itemprop="name"] {font-size:200%;}
[itemprop~="name"] {color:red;}
<div itemscope>
  <span itemprop="name">'name'</span>
  <span itemprop="name headline">'name' and 'headline'</span>
</div>