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?

Answer 1

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