1. Accueil
  2. Question et réponse
  3. override: style pseudo-classe du premier enfant utilisant jquery

override: style pseudo-classe du premier enfant utilisant jquery

2010-09-09 2 views
1

Je dois redéfinir le style défini: last-child défini dans ma feuille de style en utilisant jQuery. Je vise un balisage minimal en utilisant une combinaison de css et jQuery où la structure autour de "container-content" est ajoutée à la div sur document prêt.override: style pseudo-classe du premier enfant utilisant jquery

<div id="title-some-impact"><!--Vertical container title--></div> 
    <div class="container-content-wrapper"> 
     <div></div> 
     <div class="container-content"><!--Actual container content--> 
      <div class="sub-container-content"></div> 
     </div> 
     <div style=""></div> 
    </div> 
    <div style="clear: both;"></div> 
</div>

J'utilise le premier et le dernier div dans le conteneur-enveloppe de contenu pour ajouter des coins arrondis à l'aide de css, comme ceci:

.container-content-wrapper>div:first-child { /* rounded corners top */ 
    width: 930px; 
    height: 16px; 
    background: url(../Images/top-rounded-corners.png) top no-repeat; 
} 

.container-content-wrapper>div:last-child { /* rounded corners bottom */ 
    width: 930px; 
    height: 33px; 
    background: url(../Images/bottom-rounded-corners.png) top no-repeat; 
}

Dans certains cas, je dois changer l'image de fond fond l'utilisation de jQuery/JavaScript a lamentablement échoué jusqu'à présent.

J'ai essayé d'utiliser: $ ('. Container-content-wrapper> div: premier-enfant'). Css ('background', 'un autre lien'); En outre, l'ajout d'une autre classe pointant vers une autre image ne fonctionne pas.

Comment puis-je remplacer le style défini: last-child défini dans la feuille de style en utilisant jQuery?

Source

2010-09-09 Tom de Koning

+0

Pouvez-vous s'il vous plaît montrer votre gestionnaire complet jQuery où vous essayez et charger l'arrière-plan? Et aussi, comment charger votre jQuery, dans un fichier .js externe ou dans une balise ''

0

En fait, j'ai d'abord fait une erreur en ciblant la div dont le style doit être remplacé. C'était juste une question de faire la bonne sélection.

Pour référence, j'ai résolu en utilisant:

$('.container-content-wrapper:has(.sub-container-content)') 
.addClass('container-content-wrapper-for-sub');

où conteneur-contenu-emballage-sub a ce style et est défini ci-dessous .container--emballage de contenu> div: dernière -child

.container-content-wrapper-for-sub>div:last-child { 
/* rounded corners bottom for subsection */ 
    background: url(../Images/bottom-rounded-corners-extra-gray.png); 
}

Source

2010-09-09 11:41:38

Questions connexes

 Questions connexes