How to style elements of rich snippets?

Question

For example I have this:

<div itemscope itemtype="http://schema.org/Review">
<a itemprop="url" href="http://www.test.com"><div itemprop="name"><strong>Test</strong></div>
</a>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by: <span itemprop="name">Mr. Test</span></div>
<div><meta itemprop="datePublished" content="2014-10-05">Date published: 10/05/2014</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars</div>
</div>

How do I go about styling the divs? I don't understand how to 'target' them since there isn't a name attached to it like div id="divname" would work.

I tried for example #author or #itemscope but didn't do anything.

Any help would be appreciated. Thanks!

Answer 1

You can use an attribute selector:

[itemprop="author"] {
    background: red;
}
[itemprop="reviewRating"] {
    background: yellow;
}

Example: http://jsfiddle.net/cvkxqkfc/1/

Please note that this is not supported on older, non-modern browsers such as IE6.

View Browser compatibility: http://www.quirksmode.org/css/selectors/#link3