CSS : petit soucis de selecteur +

Par lolotoobo, il y a 11 ans

Les bases HTML/CSS

Bonjour,

J'ai une page qui ressemble à :

<div id="area-nav-bar">
    <div class="bouton"></div>
</div>
<div class="slidebar">
    lorem
</div>
<div class="slidebar">
    lorem
</div>

Selon notre bon vouloir on peut ajouter à la classe bouton une classe 

.full-slidebar

et dans ce cas le css doit être différent.
Mon css est : 

.slidebar {
    padding: 70px 20px 20px !important;
}

#area-nav-bar .full-slidebar + .slidebar {
    padding: 20px !important;
}

Malheureusmeent le style du selecteur + ne marche pas.

Merci de votre aide

5 réponses

Nairolf, il y a 11 ans

Pour que ça fonctionne il faut que ton code soit ainsi:

<div id="area-nav-bar">
    <div class="bouton full-slidebar"></div>
    <div class="slidebar">
        lorem
    </div>
</div>

<div class="slidebar">
    lorem
</div>

<div class="slidebar">
    lorem
</div>

Tu peux faire un truc du genre 

.slidebar ~ #area-nav-bar .full-slidebar

mais il faut que .slidebar soit avant #area-nav-bar

Nakin, il y a 11 ans

Salut, si tu veux juste changer le padding de ton bouton quand tu lui ajoutes la classe slidebar, tu peux tout simplement faire comme ça :

.slidebar {
    padding: 70px 20px 20px !important;
}
.bouton.slidebar {
    padding: 20px !important;
}

Après je suis pas super convaincu de l'utilité de ton !important ici mais bon, c'est une autre histoire :D

lolotoobo, il y a 11 ans

Nairolf : je ne peux pas ordonner dans ce sens.

Nakin oui mais je n'aime pas cela, je préfère que tout soit automatisé. Imagine que demain on doit faire des modifs, il faudra alors bien penser à tout nettoyer, d'où le fait de la recherhche d'une certaine automatisation :) Quant au !important si car j'utilise des feuilles de style externes m'y obligent.

En attendant de trouver une meilleur solution, un ptit coup de jQuery et on en parle plus. Mais je suis toujours preneur d'une solution 100% CSS

Nakin, il y a 11 ans

Oh ok j'avais mal saisi ton problème.

J'ai testé ton code et chez moi ça marche, tu dois avoir quelque chose d'autres qui écrase ces propriétés. :(

lolotoobo, il y a 11 ans

Pas de soucis tkt :)

Bien sur qu'il s'agit d'une version simplifiée tout comme la page HTML :) et comme il s'agit d'un plugin jquery je ne peux me permettre de trop modifier le source