Apply CSS in Microdata + Schema.org?

Question

I like to apply CSS to match the text with the design in breadcrumbs.

For example:

 <ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
› <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Is there a way to do so?

(Note that the `›` character is not valid in this context, there can’t be no text as direct child of `ol`. I see that the example on Schema.org contains it; I’ll try to change it.) — unor, Jun 11 '15 at 11:31

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

You can style elements with Microdata just like any other element, e.g. with an element selector (ol {color:red;}) or by adding class attributes in the HTML and using the class selector in CSS (.breadcrumbs {color:red;}).

If you want to make use of your existing Microdata attributes, you could use attribute selectors, for example:

a span element that has the itemprop attribute:
```
span[itemprop] {color:red;}
```
a span element that has the itemprop attribute with the value name (and no other value):
```
span[itemprop="name"] {color:red;}
```
a span element that has the itemprop attribute with the value name (and possibly other values):
```
span[itemprop~="name"] {color:red;}
```

Apply CSS in Microdata + Schema.org?

1 Answers1