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.

Stuart Kershaw · Accepted Answer · 2013-11-04T22:15:27.903

73

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/

edited Nov 04 '13 at 22:15

answered Nov 04 '13 at 22:10

Stuart Kershaw

16,831
6
37
48

Thanks! Obviously works in jsfiddle. Not working in my WP theme though but think the theme is overwriting my custom CSS - will investigate further. – IanDude Nov 04 '13 at 22:22
try with !important to override the style as in: div[itemprop="name"] h1 { color: red !important; } – robertjuh Mar 13 '17 at 14:45

score 12 · Answer 2 · edited May 23 '17 at 12:02

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>

Targeting itemprop in CSS?

2 Answers2

Example

Linked