Un calendrier == une grille !

See the Pen Calendrier template 0-1 by dupont (@dupontcodepen) on CodePen.

See the Pen Calendrier template 0-1 by dupont (@dupontcodepen) on CodePen.

TD : grid

 Création de la figure suivante.

https://dupontdenis.github.io/simulateur/

https://dupontcss.blogspot.com/p/test-grill.html

DM : 👾 trouvez un bug

Vous connaisez déjà ce fichier de Test (lien)

Voici un ensemble de selecteurs qui encadrent le second div.

sélecteur	Test
div { border:1px solid;}	❎
div:first-child {border:1px solid;}	❎
div + div { border:1px solid;}	❎
div:nth-child(2) {border:1px solid;}	❎
...

👿  BUG ! 

Tout semble parfait, mais le selecteur div:last-child  {border:1px solid;} devrait lui aussi selectionner le second DIV.

div:last-child  {border:1px solid;}

😡😡😡

Il n'en ai rien. Trouvez l'explication à ce comportement.

See the Pen DM selecteur by dupont (@dupontcodepen) on CodePen.

Verifier votre hypothèse avec ce selecteur !

div:not(div:last-child) {border:1px solid;}

❎

GAME

Cliquez sur l'image

 

Trouvez un moyen de faire disparaître l'étoile ! 

DM

Testez dans l'éditeur CSS ci-dessus la régle

    article p:nth-child(4) { border : 1px solid; }

🤡 Expliquez le résultat !

<article>

<p title="Strophe1" id="st">P1</p>

<header>

<h1></h1>

<h2></h2>

</header>

<p class="refrain">P2</p>

<p title="Strophe4" id="str">P3</p>

<p class="refrain" id="ref4">P4</p>

<footer> date (1880 - 1918) </footer>

</article>

Cours en ligne

HTML/CSS

GRID

Exemples

 https://dupontdenis.github.io/grid-exemple/

Simulateur : 

https://dupontcss.blogspot.com/p/test-grill.html

Cours : grid

Objectifs

 https://dupontdenis.github.io/grid-exemple/

Cours

Projet entreprise

Z-index

Exemple-interactif 

Analyser et corriger le code

https://dupontdenis.github.io/cssPostion-useCase/

Analyse : la photo devrait être mise en avant.

Correction

Positionnement

 

Cours

https://sites.google.com/view/duponthtml/position?authuser=0

Position absolue !

Code pour le TD -> github

Testez votre connaissance : ici

Objectif

De la position absolue (code) à l'empilement 3D (code).

TD empilement

TD empilement

Last quizz !

How to

Try it

See the Pen test selecteur by dupont (@dupontcodepen) on CodePen.

Question d'examen

HTML

<section>

  <div id="div1" class="sel">div 1</div>

  <div id="div2" class="sel">div 2</div>

  <div id="div3">div 3</div>

  <div id="div4">div 4</div>

</section>

Quelles régles selectionnent les deux premiers DIV

1. #div1 #div2
2. div:nth-child(-n+2)
3. div:not(div+div+div)
4. [class^="sel"]
5. #div1 && #div2
6. div:not(div:nth-last-child(3) ~ div)
7. [class="sel"]
8. div:not(div~div+div)
9. div:first-child,  div:first-child+div
10. div:nth-child(1), div:nth-child(2)
11. div:nth-of-tydive(-n+2)
12. div:not(div:nth-child(n+3))
13. [class$="sel"]
14. [id="div2"],[id="div1"]
15. div:nth-last-child(n+3)
16. div[class]
17. div:not(div:nth-last-child(-n+2))
18. div:not(#div3,#div4)
19. div:not(#div3,div:last-child)
20. div:not(*+*+*)

Exemple 1 : la règle 1 selectionne une balise d'identifiant #div2 descendant d'une

balise d'id #div1.

Or, #div2 est *frère* de #div1, cette régle ne selectionne pas les deux premiers div.

1. 😡#div1 #div2

Exemple 2 : les valeurs Positives de -n+2 sont données dans le tableau

n	-n+2
0	2
1	1
2	0
3	-1

la règle 2 selectionne tous les enfants en position 1 et 2 de type DIV.

Comme #div1 est premier enfant et #div2 second enfant de section, cette régle selectionne les deux premiers div.

1. 😡#div1 #div2
2. ❎div:nth-child(-n+2)

Overlay !

See the Pen overlay by dupont (@dupontcodepen) on CodePen.

Code pour s'entraîner

view livecode

code

See the Pen test pos by dupont (@dupontcodepen) on CodePen.

Positions

 

Testez votre connaissance : ici

Objectif

De la position absolue (code) à l'empilement 3D (code).

TD empilement

the 3D View tool : Microsoft

 

the 3D View

 référence

Position et z-index

 

See the Pen Learn CSS - Relative positioning and z-index by dupont (@dupontcodepen) on CodePen.

Références

 https://web.dev/learn/css/

Les 5 selecteurs à maîtriser

Pour selectionner des éléments avec des attributs :

🥇 Identifiant

🥈 Class

Test : Trouver le selecteur de class pour selectionner le premier para X : 

See the Pen Test class by dupont (@dupontcodepen) on CodePen.

La structure d'une page HTML est un arbre, on utilise le vocabulaire : 

🥇Child

🥈Descendant

🥉Siblings

Emmet et VStudio Code

Comprenez vous mainteant la syntaxe Emmet de :

.selected.warning*2⭾

main>section*2>h2+ul>li*2>article>h3+p⭾

ou

main>(section>h1+h2)+section⭾

TD Sélecteurs

Des outils

 Des outils sont disponibles pour simuler du CSS : Exemples

DM

 Quelle selecteur donne le résultat ?

Sans toucher au HTML, trouver la valeur du selecteur ?? permettant d'encadrer para03

See the Pen DM selecteur by dupont (@dupontcodepen) on CodePen.

Pour s'entrainer !

Pour s'entrainer et mieux comprendre

Test Selecteur

Test de niveau

CSS : les selecteurs

 

Cours

Questions

Liste des selecteurs

https://dupontcss.blogspot.com/p/selecteurs.html

Voici une sous liste de selecteurs à maîtriser.

Selector	Example	Example description
.class	.intro	Selects all elements with class="intro"
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element

:nth-child(n)

p:nth-child(2)

Selects every <p> element that is the second child of its parent