Targeting itemprop in CSS?

Question

I have the following two sections of code generated by a Wordpress theme. This first section of code is generated for a WP Page:

    <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> 

This second section of code is generated for a 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> 

I cannot figure out the CSS selector to specifically target and center the text of the H1 tag within the "itemprop DIV" for the 1st section of code.

Also, I would also like to target and style the H1 tag in the WP Post with a different text color but again, cannot figure out CSS selector.

Answer 1

You could try using CSS Attribute Selectors, such as:

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

and:

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

example: http://jsfiddle.net/bEUk8/

Answer 2

The [att=val] selector (as suggested by Stuart Kershaw’s) works if the itemprop attribute has only this token as value.

But the itemprop attribute can have multiple tokens as value, in which case the [att=val] wouldn’t match anymore.

So you might want to use the [att~=val] selector, which matches in both cases: if it’s the only token or if it’s one of multiple tokens.

Example

Although both span elements have the name token as value of itemprop, only the first one is matched by the CSS rule with the [itemprop="name"] selector:

[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>