Casse tête...

Bonjour à tous

je souhaites faire quelque chose d'assez particulier et sans toucher le code html :

<div class=x>
   <h1>titre</h1>
   <form>  formulaire  </form>
</div>

<div class=x>
   <h1>titre</h1>
</div>

Il faudrait que le h1 du premier exemple soit different du 2ème sachant que la seule difference est qu'il y a un form dans un cas et pas dans l'autre.

Comment déclarer un h1 différent pour chaque cas dans mon css ? J'ai essayé form~h1{mon style} mais ca ne marche pas. Je sèche...

merci !

Bonsoir,

De façon assez simple peut-être ?
Cela dépendra de ton code final...

bizare dans mon exemple ca marche, mais dans mon code les 2 prennent de même style....

pour info en réel mon exemple est imbriqué dans 3 autres div
Modifié par zic700 (11 Jan 2014 - 22:45)

zic700 a écrit :
pour info en réel mon exemple est imbriqué dans 3 autres div

Alors donnes-nous l'entièreté de ton code ou un lien vers une page en ligne...

Bonjour,

Dans le cas général, on NE peut PAS styler en CSS un élément en fonction des frères qui le suivent ou de ses enfants/descendants. Et ici form suit h1 donc c'est mal parti (si tu es développeur, avec XPath on peut faire pas mal de "parcours" qu'on ne peut pas faire en CSS, faut oublier )

Mais en profitant d'astuces ou de cas fortuits, on arrive parfois quand même à distinguer un élément suivant son "environnement", avec (exemples) :only-child, :last-child ou :nth-last-child(an+b) et en combinant E:nth-child(an+b):nth-last-child(cn+d). :empty aussi.
Inutile de préciser que c'est très fortement dépendant du code HTML, que ça cassera à la 1ère modif de celui-ci donc pas très robuste mais bon l'avantage est qu'on a pas besoin de modifier ce même code HTML...

Si tu es confronté à ces cas de façon régulière genre 2 mois après que le code HTML ait été créé, ajoute ou fais ajouter des classes sur les éléments comme .first, .last, .only, .empty, .odd et .even, etc dont tu pourras te servir si besoin est.
C'est pas aussi efficace que du code HTML/CSS cousu main à la OOCSS/BEM mais c'est mieux que rien, en particulier niveau compatibilité avec IE8 (et moins).

Question :
Est-ce que le H1 est le seul et unique élément dans le 1er cas ?

Felipe a écrit :

Question :
Est-ce que le H1 est le seul et unique élément dans le 1er cas ?

Je sens un h1:last-child qui se profile ...

désolé je ne peux pas dévoiler tout mon code html ni une page en ligne (je sais ca aide pas )

merci à tous pour votre aide. Je connais les bases du css mais j'ai honnetement un peu de mal avec les pseudos classes et conditions...

oui felipe, je suis conscient de ca, mais la c'est un cas unique et particulier

Je vous précise mon cas :

1er cas

<div class="main">
    <form action=" ... "> </form>
    <div class="c"></div>
    <div id="a" class="b">
 [b]       <h1>titre</h1>[/b]
        <form id=form1 action=" " > </form>
    </div>
    <div class="d"></div>
</div>

2eme cas

<div class="main">
    <form action=" ... "> </form>
    <div class="c"></div>
    <div id="a" class="b">
 [b]      <h1>titre</h1>[/b]
    </div>
    <div class="d"></div>
</div>

Modifié par zic700 (12 Jan 2014 - 13:44)

Il semble bien que l'on soit sur le cas d'un last-child dans le sens ou h1 est l'unique élément: http://codepen.io/anon/pen/mkntJ

Si il y a quelquechose derrier h1, ce n'est plus le dernier élément de son conteneur.

impeccable avec le last-child

merci beaucoup à tous

Pour rappel :last-Child n'est supporté qu'à partir d'IE9
Si tu considères que le problème est résolu, merci d'éditer ton premier message et de rajouter le tag [résolu] dans le titre

gc-nomade a écrit :

Je sens un h1:last-child qui se profile ...

Je pensais à only-child mais ce sera le même résultat et bon, difficile de savoir à l'avance quelle est la meilleure solution au cas où un jour il y aurait un élément avant le H1