Si un élément existe : changer la CSS d'un autre

Bonjour

Je change la CSS d'un site sous Joomla.

Je voudrais faire ceci :

SI ul.menu li ul EXISTE,
ALORS : Je modifie la CSS de "wrapper2".

L'inverse me va aussi, c'est-à-dire tester

si ul.menu li ul li n'existe pas

.

Mais je ne sais pas comment l'écrire !

Pouvez-vous m'aider ?

Merci beaucoup !

Au cas où, voici la structure :

<ul.menu>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>

<div id="#wrapper2">...

Bonjour,

il y a bien une fonction "exists" en jQuery

if ($(selector).exists()) {
    // Do something
}

Pour modifier le css d'un élément il faudrait utiliser par exemple

$(selector).css("backgroundColor", "#ff123f");

Ou bien en ajouter une class CSS avec .addClass()
Modifié par azzo (20 Feb 2013 - 15:13)

Hello.

Selon la structure de ton document, si l'ordre entre ton .wrapper2 et ton menu est tout le temps le même, tu peux utiliser un sélecteur d'adjacence.

.wrapper2 {
	/*Styles dans tous les cas*/
}

.menu + .wrapper2 {
	/*Styles de .wrapper si il est précédé d'un .menu, il faudra éventuellement écraser certains de la déclaration précédente.*/
}

Je t'invite à lire ce tuto : Sélectionner les frères d'un élément en CSS.

Merci pour vos réponses.

Merci Florian pour ce super truc, je ne connaissais pas !

C'est exactement ce dont j'ai besoin MAIS pour une raison que je ne m'explique absolument pas, ça ne fonctionne pas chez moi

Lorsque je regarde avec FireBug les CSS appliquées à #wrapper2, il n'y a pas ce que je lui applique grâce à ce selecteur d'adjacence.

Pourtant je mets bien :

ul.menu li ul + #wrapper2 
{margin-top:300px;}

Une idée du pourquoi ça ne marche pas ?

C'est normal.

Ton #wrapper2 n'est pas adjacent aux li du .menu, il est adjacent au .menu.

Le sélecteur qui va bien est juste :

.menu + #wrapper2

Modifié par Florian_R (20 Feb 2013 - 15:41)

Ha OK. Mince. Parce que moi je veux changer le style de #wrapper2 uniquement quand il y a un sous-menu. Donc ce système ne marche pas, si je mets .menu ça va s'appliquer quand il y a un menu (c'est-à-dire tout le temps).

Sinon je pensais faire un JS dans ce gout-là mais ma syntaxe est bidon.
Tu saurais la bonne syntaxe (I don't speak JavaScript) ?

<script type="text/javascript">

if ($('ul.menu li ul').length > 0) {

<style type="text/css">
#wrapper2 {margin-top:300px;}
</style>

}

</script>

Pour ce genre de chose, je n'utilise pas de JS.

Le plus propre est de rajouter une classe sur le menu ou le wrapper est d'appliquer le style approprié.

Oui mais appliquer un margin-bottom au sous-menu ne marche pas (ça ne marche qu'à partir du menu 1er niveau).
QUant à appliquer un margin-top au wrapper, je ne dois le faire que quand il y a un sous-menu.
D'où mon probleme et mon envie de recourir à JS, ne voyant pas de solution CSS.