CODEWITHSUNDEEP
javascriptjquery
Charles Yeung
Charles Yeung

Reputation: 38815

jQuery/javascript - give a style to a specific element

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

Answers (3)

Prashanth Everlasto
Prashanth Everlasto

Reputation: 11

Have you tried $("#content eq(index of element)") ??

Upvotes: 0

Neil
Neil

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

sje397
sje397

Reputation: 41862

You can use:

$('#green').parent().css(...);

If you want to be completely specific, you can do:

$('#green').parent('#content').css(...);

Upvotes: 1

Related Questions