Targeting itemprop in CSS?

IanDude Published at Dev

IanDude

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

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/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-4

Comments

0 comments

From Dev