Customizing each post pages based on label in Blogger

Question

I came across a post Label-based Post Customization which showed how to design each blog post based on the label it was posted. That is every post with the same label will automatically have the same design.

But the problem is with that I am unable to customize outside the post content(main wrapper) because the 'label' is defined only as the post content area. I like to have different color of the header and other outer wrapper for my labels.

I will give the code I used

replace the second occurrence of <data:post.body/> (between span attribute) with this

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<!-- Only using the last label -->
<div expr:class='"label" + data:label.name'>
<p> <data:post.body/> </p>
</div>
</b:if> 
</b:loop>
<b:else/>
<div class='labelNone'> <p><data:post.body/></p> </div>
</b:if>

Then In the style portion of your template, apply a style by specifying the div class. Here's an example that will put a background image for all posts with label "tech":

<style type='text/css'>
div.labeltech {
background-image: url(&quot;http://yoursite.com/Wallpaper-Widescreen.jpg&quot;);
background-repeat: no-repeat;
background-position: bottom right;
display: block; 
}
</style>

It would be very nice if the knowledgeable members at stack overflow would help me since I am only a student.

Answer 1

I'm afraid you will have to stick to javascript (for example jquery) implementation of 'parent' ie. http://api.jquery.com/parent/

When it comes to CSS specification there is no parent element selector neither in CSS2 nor CSS3 specification. You might play around with 'select X element whose parent is Y' (Y > X), but that's all there is for now.

Please, take a look at the available selectors list http://www.w3.org/TR/css3-selectors/#selectors and maybe you will find something useful

On the bright side, there are plans to create something like that

!div p{}

but so far, it is still a draft and no browser supports it http://www.w3.org/TR/selectors4/#subject