Best way to update a nested template-specific class

bswb97 · 05-03-2012, 03:09 AM

I'm working on a WordPress site right now and I want to style post meta data differently on a category archive page as opposed to a single post page. They are both using the entry-date class but the body that is called is different between the archives and single post.

Here is how the classes and IDs are nested for the archive page:

Code:

<body class="archive category category-blog category-11 logged-in admin-bar browser-gecko">
<div id="page" class="hfeed container">
<div id="main" class="clearfix">
<div id"content" class="sidebar" role="main">
<div class="entry-content">
<span class="entry-meta">
<span class="entry-date">

As comparison, a single post page, everything is the same except the first line:

Code:

<body class="single single-post postid-191 single-format-standard logged-in admin-bar browser-gecko">

In the template's original CSS, there is body.archive, which is what I want to update -- all types of categories (categories, tags, etc.)

How do I add template-specific CSS so that my entry-date styling only affects the pages using body.archive? I've experimented with different nesting techniques but I'm not having any luck.

I would link the site but the WP site is hidden to the public until launch. Thanks for your input!

SB65 · 05-03-2012, 02:58 PM

This is straightforward:

Code:

body.archive .entry-date{...styles...}

will do the trick. So this style will only apply to elements with class of entry-date within body elements that have class archive.