Il ne s'agit pas directement ici d'appliquer des styles selon la hiérarchie : celle-ci exige qu'un élément soit imbriqué dans un autre. Nous allons voir ici comment appliquer des mises en forme à des balises qui en suivent d'autres.
Dans notre cas, nous souhaitons agir sur tous les paragraphes qui correspondent au titre h1 mais pas les paragraphes qui seraient dans d'autres éléments par exemple un aside.
element ~ element { propriété_css : valeur; }Modifions notre HTML pour l'adapter à la situation :
<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1> <p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a href=«http://w3.org»> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <abbr>HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p> <p>Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.</p><aside><p>Le CSS3 est encore en cours de définition, vérifiez régulièrement l'avancée de la recommandation!</p></aside>
du CSS :
h1 ~p {color:green; }
pour un rendu :
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisable dans de nombreux contextes.
On voit ici très bien que le p placé dans un aside est tout simplement ignoré lors de la mise en forme.
Pour aller un peu plus loin même si le cas est plus rare, nous souhaitons agir sur le paragraphe placé directement après le h1 et uniquement dans ce cas.
element + element { propriété_css : valeur; }
ou
h1 +p {color:green; }
pour un rendu :
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisable dans de nombreux contextes.
Les pseudo-classes offriront parfois d'autres solutions pour faire des sélections de ce type. Évidemment, si une balise autre que p est inséré avant le premier paragraphe, notre paragraphe actuel n'est plus un suivant direct et ne se voit donc pas affecté.
Par exemple :
<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1>
<aside><p>Le CSS3 est encore en cours de définition, vérifiez régulièrement l'avancée de la recommandation!</p></aside>
<p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a
href=«http://w3.org»> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <abbr>HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p>
<p>Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.</p>Notre CSS reste le même :
h1 + p { color:green
pour un rendu presque trop simple :
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisable dans de nombreux contextes.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.