28172 sujets

CSS et mise en forme, CSS3

[Résolu] H1, h2, et div

Bonjour à tous, ravis de rejoindre la communauté AlsaCréations.

J'aimerais savoir s'il est possible d'implanter un attribut css à un h2 dans une div spécifique.
Evidemment je veux que cela ne s'applique qu'au h2 présent au sein de la div, le reste étant régi par d'autres attributs.

Certes je pourrais mettre une classe à ce h2 tout simplement.
Mais en faite j'ai déjà fait des km de pages, et, flemmard, je me demande si je peux éviter de modifier chaque page une par une pour rajouter class=""...

J'ai tenté de faire un #madivconcernée h2{display:none;} mais le display:none; fonctionne ailleurs sur ma page (ce que je ne veux pas).

Suis-je obligé de revoir mes prévisions temporelles, ou y'a-t-il une astuce que j'aurais oublié ?

Merci par avance de vos réponses,

Bien à vous,
Modifié par bennythekid (07 Mar 2011 - 10:21)
Bonjour et bienvenue !

Eh bien c'est curieux, cela devrait pourtant fonctionner en ne sélectionnant que le <h2> présent dans ta <div> en question...

Essaye peut-être un autre sélecteur CSS comme :

#madivconcernée > h2


Cela permet de sélectionner un enfant direct de ta <div>.
Le sélecteur que tu as utilisé précédemment permet de récupérer un descendant (c'est-à-dire pas forcément un enfant direct) de ta <div>.

Il n'y a aucune raison que ce sélecteur marche mieux que l'autre et il n'y a d'ailleurs pas de raison apparente à ce que le sélecteur que tu as déjà tenté ne fonctionne pas...

Peut-être pourrais-tu mettre un bout de code pour qu'on essaye de mieux t'orienter ?
Merci Maliki,

Je viens de tester en #div > h2, cela fonctionne, j'avoue que je ne sais pas comment ni pourquoi mais tant mieux.
Merci également pour le cours de css, un plus qui m'aide à en apprendre un peu plus...

Pour info, voilà mon code :

Css
#main-content > h2{display:none;}


Html
<div id="main-content" role="main">
                      <div id="main-content-header">
              <h1 id="page-title">A savoir</h1>                          </div>
                              <div id="content"><div class="article">

  
  
  
  
  <div class="content"><link type="text/css" rel="stylesheet" href="http://www.megeve.com/sites/default/files/media/css_files/style_main_pages.css">
<fieldset class=" collapsible fieldset-num-ros-d-urgences collapsed"><legend class="collapse-processed"><a href="#">Numéros d'urgences</a></legend><div class="fieldset-wrapper" style="display: none;"><div>
<h2>Numéros d'urgences</h2> [Je coupe ici ça suffit pour l'exemple]


Un grand merci, je passe le sujet en résolu, et espères pouvoir moi aussi guider quelques personnes à travers le forum.
A mon avis c'est parce que tu voulais que cela n'influe que sur le premier <h2> contenu dans ta <div> "#main-content", or si tu mets "#main-content h2", les propriétés spécifiées vont prendre effet sur tous les <h2> de "#main-content", même si ces titres sont contenu dans des <div> enfants de "#main-content".

Pour mieux comprendre, voici un exemple simple :

HTML :

<body>
	<div id="conteneur">
		<h2>H2 enfant</h2> <!-- Titre en rouge -->
		<div>
			<h2>H2 descendant</h2> <!-- Titre en bleu -->
		</div>
	</div>
</body>


CSS :

#conteneur h2 {
	color: blue;
}

#conteneur > h2 {
	color: red;
}


Normalement, tous les <h2> dans "#conteneur" devraient être bleus d'après la première règle en CSS, mais comme on précise ensuite que les <h2> enfants (et pas descendants) de "#conteneur" doivent être rouges, le premier (et seulement lui) prend cette couleur.

En tout cas content que ton problème soit réglé, à la prochaine !
Modifié par Maliki (24 Feb 2011 - 17:17)
Sujet clos
Aller à