🆒Préparation au DS

Voici la liste des sélecteurs : Révision !

Code HTML

<div class="top">div : class top
<h1>h1</h1>
<ul id="tmpPlants" class="tmpExample">
<li class="A B tmpExample" id="item.A">li : class =A et B id=item.A</li>
<li class="A tmpExample" id="b">li : class =A id=b</li>
<li class="B tmpExample" id="c">li : class =B id=c</li>
</ul>
<footer> footer </footer>
</div>

Pour chaque sélecteur, encadrer les éléments sélectionnés

Selecteurs ('ul, li')
Selecteurs ('li:not(#b)')
Selecteurs ( "#item.A" )
Selecteurs ( ".A.B" )
Selecteurs ( ".top :first-child" )
Selecteurs ( "ul:first-child" )
Selecteurs ( "li:not(:hover)" )
Selecteurs ( "li.B + *" )
Selecteurs (".top :nth-child(2)")
Selecteurs (".top :nth-of-type(1)")
Selecteurs (".top :not(:last-child)")

Exemple :

Selecteurs ('h1')

------------- Auto correction

div : class top

h1

li : class =A et B id=item.A
li : class =A id=b
li : class =B id=c

Encadrez la selection ('ul, li')
Encadrez la selection ('li:not(#b)')
Encadrez la selection ( "#item.A" )
Encadrez la selection ( ".A.B" )
Encadrez la selection ( ".top :first-child" )
Encadrez la selection ( "ul:first-child" )
Encadrez la selection ( "li:not(:hover)" )
Encadrez la selection ( "li.B + *" )
Encadrez la selection (".top :nth-child(2)")
Encadrez la selection (".top :nth-of-type(1)")
Encadrez la selection $(".top :not(:last-child)")

Objectifs du Cours

🚀Aprrendre l'autonomie ! Ce n'est pas ~~Copilot~~

Illustration

Je vais illustrer mon propos avec un exemple concret ( lien ).

Mimétisme :

Voici un effet classique d'animation lorsque vous passez votre souris sur un bloc.

Mon premier objectif est de vous donnez envie de découvrir cet effet par vous même.

Mais surtout, il faut que vous soyez convaincu que vous pouvez trouver par vous même les trucs utilisés pour réaliser cet effet génial !

Je parle de trucs, ou de coups de génie des designers qui inventent avec une technologie donnée des effets devenus aujourd'hui "des classiques". C'est ce que j'appelle la créativité.

L'objectif du cours est de vous faire découvrir ces effets par vous même. Je parle de découvrir et non de pouvoir immédiatement mettre en place ces effets.

Mon but est donc de vous permettre d'être autonome dans votre découverte.

Mais comment allez vous découvrir la magie de cet effet ?

En cours ou en TD, je vous montrerai un formidable outil qui permet de simuler la position de votre souris sur un élément. Cette information facilitera votre recherche.

Lorsque vous aurez déjà bien avancé dans votre recherche, nous pourrons faire le point en tentant de formaliser les choses car nous aurons compris à quoi cela sert concrètement.

Mémorisation :

Après l'observation viendra le temps de la formalisation.

Je vous donnerai des informations pour mieux comprendre ( lien ) et assimiler vos nouvelles connaissances.

Maîtrise :

Nous pourrons alors tenter de mettre en place notre propres effet

( lien )

Bilan :

En comprenant par l'exemple cet effet, vous apprendrez la propriétée overflow et la pseudo classe hover.

L'important est de vous donner les moyens de retrouver ces informations rapidement si vous en avez besoin en entreprise. Nul besoin donc de tout mémoriser ! Pour cela, la maîtrise d'un outil d'inspection du code sera obligatoire !