Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

CSS Selector for 1st blog post entry within blog page

Hey, I'm trying tweak the css of the 1st blog post on the blog page.

Trying the following:

.w-blog-list > w-blog-entry-h:first-child {
    background: red;
}

which isnt working

A blog entry looks like this

<div class="l-main"> <div class="l-submain"><div class="l-submain-h g-html i-cf"><div class="g-cols offset_default"><div class="three-quarters"><div class="w-blog columns_1 imgpos_atleft"> <div class="w-blog-list"><div class="post-744 post type-post status-publish format-standard hentry category-blog tag-content-marketing tag-storytelling w-blog-entry"> <div class="w-blog-entry-h"><a class="w-blog-entry-link" href="http://test.ingenuitydigital.co.uk/the-re-emergence-of-storytelling-in-content-marketing/"><span class="w-blog-entry-preview"><span class="w-blog-entry-preview-icon"><i class="fa fa-file-o"></i></span></span><h2 class="w-blog-entry-title"> <span class="w-blog-entry-title-h">The Re-emergence of Storytelling in Content Marketing</span> </h2></a> <div class="w-blog-entry-body"> <div class="w-blog-meta"><div class="w-blog-meta-date"> <i class="fa fa-clock-o"></i> <span>16th May 2014</span> </div></div><div class="w-blog-entry-short">As with any new channel, when the online world first appeared businesses rushed to get something, anything online....</div><a class="w-blog-entry-more g-btn color_default size_small outlined" href="http://test.ingenuitydigital.co.uk/the-re-emergence-of-storytelling-in-content-marketing/"><span>Read More</span></a></div></div></div><div class="post-201 post type-post status-publish format-standard has-post-thumbnail hentry category-blog tag-digital-marketing tag-display-advertising tag-ppc tag-remarketing w-blog-entry"> <div class="w-blog-entry-h"><a class="w-blog-entry-link" href="http://test.ingenuitydigital.co.uk/make-your-ppc-perform/"><span class="w-blog-entry-preview"><img width="350" height="334" src="http://test.ingenuitydigital.co.uk/wp-content/uploads/2014/02/Make-Your-PPC-Perform-350x334.jpg" class="attachment-blog-small wp-post-image" alt="Make Your PPC Perform" /></span><h2 class="w-blog-entry-title"> <span class="w-blog-entry-title-h">Make your PPC Perform</span> </h2></a> <div class="w-blog-entry-body"> <div class="w-blog-meta"><div class="w-blog-meta-date"> <i class="fa fa-clock-o"></i> <span>4th February 2014</span> </div></div><div class="w-blog-entry-short">If you’re not seeing ROI on your PPC campaigns – why not talk to Β­us? At Ingenuity Digital...</div><a class="w-blog-entry-more g-btn color_default size_small outlined" href="http://test.ingenuitydigital.co.uk/make-your-ppc-perform/"><span>Read More</span></a></div></div></div><div class="post-202 post type-post status-publish format-standard has-post-thumbnail hentry category-blog tag-digital-marketing tag-internet-marketing tag-seo w-blog-entry"> <div class="w-blog-entry-h"><a class="w-blog-entry-link" href="http://test.ingenuitydigital.co.uk/4-ways-to-get-your-site-into-shape-for-the-new-year/"><span class="w-blog-entry-preview"><img width="350" height="350" src="http://test.ingenuitydigital.co.uk/wp-content/uploads/2014/01/4-ways-to-get-your-site-into-shape-for-the-New-Year-350x350.jpg" class="attachment-blog-small wp-post-image" alt="4 ways to get your site into shape for the New Year" /></span><h2 class="w-blog-entry-title"> <span class="w-blog-entry-title-h">4 ways to get your site into shape for the New Year</span> </h2></a> <div class="w-blog-entry-body"> <div class="w-blog-meta"><div class="w-blog-meta-date"> <i class="fa fa-clock-o"></i> <span>6th January 2014</span> </div></div><div class="w-blog-entry-short">Whatever your market, the online world is more important than ever, and we’ve got four ways you can...</div><a class="w-blog-entry-more g-btn color_default size_small outlined" href="http://test.ingenuitydigital.co.uk/4-ways-to-get-your-site-into-shape-for-the-new-year/"><span>Read More</span></a></div></div></div><div class="post-525 post type-post status-publish format-standard hentry category-blog tag-algorithmic-updates tag-seo w-blog-entry">

Any ideas would be really appreciated.

Look i'm going for is this

https://dgibson-wmg.tinytake.com/sf/OTU2Ml8xMDg1MzM

1 Answer

There are two problems in your css selector. Try using:

.w-blog-list .w-blog-entry:first-child .w-blog-entry-h {
    background: red; 
}

You're missing the . in front of w-blog-entry-h, so it's not matching on the class. Additionally, by using > you're only selecting direct descendants, but w-blog-entry-h is inside of this div:

<div class="post-744 post type-post status-publish format-standard hentry category-blog tag-content-marketing tag-storytelling w-blog-entry">

so it's not a direct descendent.