Reputation: 38815
Suppose I have 3 page as below:
page 1:
<div id="content">
<div id="red"></div>
</div>
page 2:
<div id="content">
<div id="blue"></div>
</div>
page 3:
<div id="content">
<div id="green"></div>
</div>
This 3 page are in the same template, so if I add
#content {
margin-top: 10px;
}
All page will apply this style, If I only want to put this style to page 3, how can I do that?
Generally, we use $('#content > #green').css(...)
to point to a element, but can we have something like $('#content < #green')
to point to a reversed element and give it some style?
Upvotes: 0
Views: 424
Reputation: 5780
Or you could create a new style class 'contentClass' which holds the styles for elements with id="content" and apply the style class to red, green, and blue. In this way, content becomes an abstract container with no styles, and the actual styling gets moved where it should.
So in your style sheet:
.contentClass {
/* Your content styles here /*
}
And on your pages:
<div id="content">
<div id="red" class="contentClass"></div>
</div>
<div id="content">
<div id="green" class="contentClass"></div>
</div>
<div id="content">
<div id="blue" class="contentClass"></div>
</div>
Upvotes: 0
Reputation: 41862
You can use:
$('#green').parent().css(...);
If you want to be completely specific, you can do:
$('#green').parent('#content').css(...);
Upvotes: 1