Bonjour à tous,

J'ai un petit probleme avec l'héritage, notamment à cause de bootstrap

Voici le bout de code en question

<section class="container" id="presentation">
	<div class="col-lg-offset-3 col-lg-6">
		<h1>Titre à mettre en MAJ</h1>
		<p>Contenu</p>
	</div>
</section>

Je veux que mon text soit centré sur 6 colonne uniquement ( d’où bootstrap )

Je voudrais appliqué des propriété CSS uniquement au balise <h1> et <p> présente dans l'id "presentation".

Je ne trouve pas la bonne propriété pour l'héritage malheureusement ...

J'ai essayé:

#presentation > col-lg-offset-3 col-lg-6 > h1 {
    text-transform: uppercase;
}

#presentation > h1 {
    text-transform: uppercase;
}

Mais aucun changement ....

Merci d'avance

Bonjour,

#presentation h1 suffira

Pour info :

• ton premier cible les h1 qui sont enfants (directs, d'où >) d'un élément HTML "col-lg-6", lui-même descendant d'un "col-lg-offset-3", lui-même enfant d'un élément d'id "presentation" : outre que les éléments "col-lg-6" et "col-lg-offset-3" n'existe pas, il y a là une descendance de trop
• ton second essai cible les h1 qui sont enfants d'un élément d'id "presentation" : et comme tu as une div intermédiaire, ça ne peut rien trouver

Merci de ta réponse rapide, et en effet cela fonctionne très bien. ( faudrait me remettre à jours au niveau de l'héritage, mais pas sur qu'ils en parlent dans les cours ici )

Donc en si j'ai bien compris "presentation h1" signifie, toutes les balises h1 ?


-
Edité par Eolynas 11 décembre 2017 à 20:35:56

#presentation h1 c'est "tous les h1 qui sont descendants de #presentation".

Le > est utile si tu sais que ce que tu veux cibler est un enfant (pas un descendant) d'un élément donné. Par exemple :

<div class="wrapper">
  <div>
    <p>Yoho !</p>
    <div>
      <p>Yiiii</p>
    </div>
  </div>
</div> 

.wrapper > div > p { color: red; }

Ici, seul le paragraphe contenant "Yoho !" sera en rouge, car il est le seul à être un enfant direct d'une div qui est un enfant direct de l'élément de classe "wrapper".

Personnellement, je me sers surtout de > pour des petites astuces comme :

.comme-une-table { display: table; }

.comme-une-table > * { display: table-cell; }

(je donne à un élément un display "table", et à ses enfants directs un display "table-cell")

 

-
Edité par Lamecarlate 11 décembre 2017 à 20:48:21