28172 sujets

CSS et mise en forme, CSS3

Sélecteur d'enfant

Bonjour,

je souhaite appliquer une mise en forme différente au dernier paragraphe qui suit un titre ( cette mise en forme s'applique aussi si ce paragraphe est unique, c'est à dire à la fois premier et dernier).

Dans un premier temps je pensais sélectionner les paragraphes concernés ( c'est dire paragraphes suivant un titre H2) par le biais d'un sélecteur enfant:
h2 > p
et ensuite sélectionner le dernier par:
h2 >p:last-of-type { code css }

Mais cela n'a aucun effet.. Erreur sur l'utilisation du selecteur enfant h2>p ??

Cordialement
Administrateur
Bonjour,

Le sélecteur d'enfant cible un enfant (ex : <h2><p></p></h2>), ce qui n'est pas ton cas puisque si j'ai bien compris tu souhaites cibler un élément frère (ex : <h2></h2><p></p>).

Dans ton cas, c'est le sélecteur d'adjacence que tu cherches (le "+" si c'est le frère directement suivant, ou le "~" s'il n'est pas forcément direct).

Si tu veux cibler "le dernier paragraphe qui suit un titre", il te suffit d'écrire h2 ~ p:last-of-type { code css }.

Tu n'étais pas loin Smiley cligne
Modifié par Raphael (05 Jan 2015 - 16:10)
Merci

En plus j'avais testé h2+p...
mais j'ai fait l'erreur de raisonner en "traitement de texte" (mode plan) où on a la vision des paragraphes dépendant du titre qui les précèdent., et non en "html",
Modifié par cpalo (05 Jan 2015 - 16:41)
J'ai parlé un peu trop vite.

h2 ~p {code css } sélectionne tous les p qui suivent le premier h2 de la page. Ce qui fait que les paragraphes suivant un h3 sont aussi sélectionnés.

h2 ~p:last-of-type { code css }; } sélectionne le dernier paragraphe de la page
Administrateur
cpalo a écrit :
h2 ~p:last-of-type { code css }; } sélectionne le dernier paragraphe de la page

Oui, s'il est précédé d'un h2. Ce n'est pas ce que tu voulais ? Si non, il faudrait que tu précises un peu plus ton objectif (illustration ,explication détaillée).

<h2>1° rubrique</h2>
<p>1-1 Paragraphe unique concernant la 1° rubrique</p>
<h2>2° rubrique</h2>
<p>2-1 Premier paragraphe concernant la seconde rubrique</p>
<p>2-2 Second paragraphe concernant la seconde rubrique</p>
<p>2-3 Troisième paragraphe concernant la seconde rubrique</p>
	<h3>Sous-rubrique 1</h3>
	<p>Premier paragraphe concernant la première sous-rubrique</p>
	<p>Second paragraphe concernant la première sous-rubrique</p>
	<h3>Sous-rubrique 2</h3>
	<p>Premier paragraphe concernant la seconde sous-rubrique</p>
	<p>Second paragraphe concernant la seconde sous-rubrique</p>
<h2>3° rubrique</h2>
<p>3-1 Premier paragraphe concernant la troisième rubrique</p>
<p>3-2 Second paragraphe concernant la troisième rubrique</p>


Ce que je souhaite c'est pour chacun des derniers paragraphes suivant un h2 ( 1-1, 2-3, 3-2) ils aient un style différent ( essentiellement un margin ).

Je peux mettre en ligne un exemple.
Administrateur
Du coup je ne vois pas trop comment faire à part en prenant le problème différement, par exemple avec un margin-top sur les h2.
L'objet c'est la rédaction d'articles relativement longs . Alors peut être qu'il est utile que j'utilise des sections par rubrique.
Ce qui donnerait la structure suivante. Mais est-ce que cela offrirait plus de facilité pour la mise en forme particulière de ces "derniers" paragraphes? et est-ce que cela serait une utilisation "normale" des balises sections?


<article>
	<h1>Titre de l'article</h1>
	<section>
		<h2>1° rubrique</h2>
		<p>1-1 Paragraphe unique concernant la 1° rubrique</p>		
	</section>	
	<section>	
       <h2>2° rubrique</h2>
		<p>2-1 Premier paragraphe concernant la seconde rubrique</p>
		<p>2-2 Second paragraphe concernant la seconde rubrique</p>
		<p>2-3 Troisième paragraphe concernant la seconde rubrique</p>
			<h3>Sous-rubrique 1</h3>
			<p>Premier paragraphe concernant la première sous-rubrique</p>
			<p>Second paragraphe concernant la première sous-rubrique</p>
			<h3>Sous-rubrique 2</h3>
			<p>Premier paragraphe concernant la seconde sous-rubrique</p>
			<p>Second paragraphe concernant la seconde sous-rubrique</p>
	</section>			
	<section>		
		<h2>3° rubrique</h2>
		<p>3-1 Premier paragraphe concernant la troisième rubrique</p>
		<p>3-2 Second paragraphe concernant la troisième rubrique</p>
	</section>	
</article>

Modifié par cpalo (05 Jan 2015 - 18:15)
Salut,

Dans ton cas, ce qui te faciliterait la vie serait d'enfermer chacun de tes h3 et les p qui en dépendent dans un élément section, comme suit :
<article>
  <h1>Titre de l'article</h1>
  <section>
    <h2>1° rubrique</h2>
    <p>1-1 Paragraphe unique concernant la 1° rubrique</p>		
  </section>	
  <section>	
    <h2>2° rubrique</h2>
    <p>2-1 Premier paragraphe concernant la seconde rubrique</p>
    <p>2-2 Second paragraphe concernant la seconde rubrique</p>
    <p>2-3 Troisième paragraphe concernant la seconde rubrique</p>
    <section>
      <h3>Sous-rubrique 1</h3>
      <p>Premier paragraphe concernant la première sous-rubrique</p>
      <p>Second paragraphe concernant la première sous-rubrique</p>
    </section>
    <section>
      <h3>Sous-rubrique 2</h3>
      <p>Premier paragraphe concernant la seconde sous-rubrique</p>
      <p>Second paragraphe concernant la seconde sous-rubrique</p>
    </section>
  </section>		
  <section>		
    <h2>3° rubrique</h2>
    <p>3-1 Premier paragraphe concernant la troisième rubrique</p>
    <p>3-2 Second paragraphe concernant la troisième rubrique</p>
  </section>	
</article>

Auquel cas, tu pourrais plus aisément appliquer la règle h2 ~ p:last-of-type (soit dit en passant, Codepen est ton ami Smiley cligne ).
Bonjour,

Merci. C'est bien le résultat que je voulais.
Sinon j'avais pensé à une classe spécifique à affecter au dernier paragraphe.

Je cherchais une solution "automatique" pour le cas où le rédacteur n'aurait pas été un connaisseur du hml pour rédiger l'article (exemple d'un cms en mode wysing ) et donc qu'il n'aurait pas pu saisir ces blocs de section.

Cordialement
Sujet clos
Aller à