org - ¿Está apuntando a itemprop en CSS?

schema org types

Question

Tengo las siguientes dos secciones de código generadas por un tema de Wordpress. Esta primera sección de código se genera para una página 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>

Esta segunda sección de código se genera para una publicación de WP:

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

No puedo entender el selector CSS para apuntar y centrar específicamente el texto de la etiqueta H1 dentro de "itemprop DIV" para la primera sección del código.

Además, también me gustaría apuntar y diseñar la etiqueta H1 en la publicación WP con un color de texto diferente, pero nuevamente, no puedo entender el selector CSS.

Answer 1

El selector [att=val] (como lo sugiere Stuart Kershaw''s ) funciona si el atributo itemprop solo tiene este token como valor.

Pero el atributo itemprop puede tener múltiples tokens como valor , en cuyo caso el [att=val] ya no coincidirá.

Por lo tanto, es posible que desee utilizar el selector [att~=val] , que coincide en ambos casos: si es el único token o si es uno de varios tokens.

Ejemplo

Aunque ambos elementos de span tienen el token de name como valor de itemprop , solo el primero coincide con la regla de CSS con el selector [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>

Answer 2

Puede intentar usar los selectores de atributos CSS, como:

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

y:

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

ejemplo: http://jsfiddle.net/bEUk8/