CSS (Cascading Style Sheet)

contenu
menu
navigation
outils

Arborescence

Arborescence

Quelles règles permettent de mettre un cadre aux articles ?

<section>
  <article>
    <p id='paragraphe'>paragraphe 1</p>
    <p>paragraphe 2</p>
  </article>
  <article>
    <p class='paragraphe'>paragraphe 3</p>
    <p lang='paragraphe'>paragraphe 4</p>
  </article>
</section>  

<section>
  <article>
    <p id='paragraphe'>paragraphe 1</p>
    <p>paragraphe 2</p>
  </article>
  <article>
    <p class='paragraphe'>paragraphe 3</p>
    <p lang='paragraphe'>paragraphe 4</p>
  </article>
</section>

Choix attendu

article { border : 2px solid black ; }
Tous les articles auront une bordure.
section article { border : 2px solid black ; }
Les articles qui sont un descendant d'une section ont une bordure.
section > article { border : 2px solid black ; }
Les articles qui sont un enfant d'une section ont une bordure
section, article { border : 2px solid black ; }
Les sections et les articles ont une bordure.
section article p { border : 2px solid black ; }
La bordure sera sur les paragraphes qui sont un descendant d'un article qui lui-même est descendant d'une section.

Arborescence

Quelles règles permettent de mettre un cadre aux paragraphes ?

<section>
  <article>
    <p id='paragraphe'>paragraphe 1</p>
    <p>paragraphe 2</p>
  </article>
  <article>
    <p class='paragraphe'>paragraphe 3</p>
    <p lang='paragraphe'>paragraphe 4</p>
  </article>
</section>  

<section>
  <article>
    <p id='paragraphe'>paragraphe 1</p>
    <p>paragraphe 2</p>
  </article>
  <article>
    <p class='paragraphe'>paragraphe 3</p>
    <p lang='paragraphe'>paragraphe 4</p>
  </article>
</section>

Choix attendu

p { border : 2px solid black ; }
Tous les paragraphes auront une bordure.
section p { border : 2px solid black ; }
Tous les paragraphes qui sont un descendant d'une section auront une bordure.
section > p { border : 2px solid black ; }
Seuls les paragraphes qui sont un enfant d'une section auront une bordure.
Ici, les paragraphes ne sont pas des enfants mais des descendants.
section, p { border : 2px solid black ; }
Toutes les sections et tous les paragraphes auront une bordure.
section p article { border : 2px solid black ; }
Seuls les articles qui sont un descendant d'un paragraphe lui-même descendant d'une section auront une bordure.
Ici, il n'y en a pas.

Arborescence

Quelles règles permettent de mettre un cadre seulement au paragraphe 4 ?

<section>
  <article>
    <p id='paragraphe'>paragraphe 1</p>
    <p>paragraphe 2</p>
  </article>
  <article>
    <p class='paragraphe'>paragraphe 3</p>
    <h1>je suis un titre</h1>
    <p lang='paragraphe'>paragraphe 4</p>
  </article>
</section>  

<section>
  <article>
    <p id='paragraphe'>paragraphe 1</p>
    <p>paragraphe 2</p>
  </article>
  <article>
    <p class='paragraphe'>paragraphe 3</p>
    <h1>je suis un titre</h1>
    <p lang='paragraphe'>paragraphe 4</p>
  </article>
</section>

Choix attendu

article > p[lang] { border : 2px solid black ; }
Tous les paragraphes avec un attribut lang qui sont un enfant d'un article.
section > article ~ article > p ~ p { border : 2px solid black ; }
Tous les paragraphes qui suivent un autre paragraphe enfant d'un article qui suit un autre article qui est enfant d'une section.
section > article ~ article > p + p { border : 2px solid black ; }
Tous les paragraphes qui suivent immédiatement un autre paragraphe enfant d'un article qui suit un autre article qui est enfant d'une section.
Ici, le paragraphe 4 est séparé du précédent par un h1.

Correction Recommencer

Précédent
Suivant

Introduction
Intégration de la mise en forme
Règle CSS
Media Queries
Bootstrap
Sass

Accueil
Module
Outils