Frères d'un élément : sélecteur adjacent

 

Habiller une liste, de manière simple et concise. Voilà, ci-dessous une première application simple des sélecteurs adjacents : les couleurs de fond alternent d'item en item...

Entrons dans le vif du Sujet

      CSS3 iemzchromeoperasafari
I Frère immédiat : le sélecteur d'adjacence directe

Le symbole + permet de cibler le frère immédiat d'un élément :

Exemple

Soit un titre h2 suivi de 2 paragraphes, quel sera l'effet de la déclaration

un titre de niveau h2

un paragraphe Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum ligula a purus accumsan viverra. Curabitur non condimentum arcu.

un deuxième paragraphe Curabitur volutpat iaculis mi vitae dictum. Aenean nec tortor arcu. Vestibulum sed urna ultricies orci ornare venenatis. Donec sed purus libero. Donec tincidunt est nec facilisis mollis.

II Tous les frères suivants au même niveau : sélecteur d'adjacence indirecte (General sibling combinator )

Le symbole ~ permet de cibler tous les frères suivants de même niveau :

Exemple

un titre de niveau h2

titre de niveau h3

titre de niveau h4

titre de niveau h2

titre de niveau h4

titre de niveau h4

III le n ième d'une fratrie, :nth-child() pseudo-classe

Exemple
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Exemple
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

IV Que peut désigner :nth-child(3n+1) ?

nth-child() accepte comme valeur une expression numérique, ou les mots-clefs oddet even. Cette valeur numérique peut être cconstruite à l'aide d'un symbole "n" désignant un entier quelconque positif {0;1;2;...}.

Pour ici :nth-child(3n+1), les éléments sélectionnés seront :

Exemple
Lorem 1 ipsum 2 dolor 3 sit 4 amet 5 Lorem 6 ipsum 7 dolor 8 sit 9 amet 10
Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Test1 : Ecrire le css le plus court permettant la coloration des lignes d'un tableau de la manière suivante.

(Le corrigé est écrit, demandez-le)

Test2 : Sauriez-vous construire avec une seule fois l'instruction " background-color:black; " le damier de l'échiquier ? (le corrigé est écrit, à demander si nécessaire)

Reprendre le code la liste en exemple d'introduction :

Ajouter les lignes nécessaires afin qu'au suvol d'une ligne celle-ci s'agrandisse et les autres rétrécissent et s'opacifient comme ci-dessous. (la hauteur globale de la liste doit rester invariante au final)

(le corrigé est écrit, à demander si nécessaire)

En reprenant l'énoncé précédent, on tentera d'opacifier que le précédent et le suivant du survolé.