jQuery/javascript - donner un style à un élément spécifique

Question

Supposons que je 3 page ci-dessous:

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> 

Ces 3 pages sont dans le même modèle, donc si j'ajoute

#content { 
    margin-top: 10px; 
} 

Toutes les pages vont appliquer ce style, Si je veux seulement mettre ce style à la page 3, comment puis-je faire cela?

Généralement, nous utilisons $('#content > #green').css(...) pour pointer vers un élément, mais pouvons-nous avoir quelque chose comme $('#content < #green') pour désigner un élément inversé et lui donner du style?

Answer 1

Vous pouvez utiliser:

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

Si vous voulez être tout à fait spécifique, vous pouvez faire:

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

Answer 2

Ou vous pouvez créer une nouvelle classe de style « contentclass » qui contient les styles pour éléments avec id = "content" et appliquez la classe de style au rouge, vert et bleu. De cette façon, le contenu devient un conteneur abstrait sans styles, et le style réel est déplacé où il le devrait.

Donc, dans votre feuille de style:

.contentClass { 
    /* Your content styles here /* 
} 

Et sur vos 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> 

Answer 3

Avez-vous essayé $("#content eq(index of element)") ??