Pages

file rouge

 🥷Like Ecommerce




Position absolute




🪛 http://dupontcours.free.fr/CSS/Animation/absolue.html

🥷 http://dupontcours.free.fr/CSS/Animation/absolue-dans%20un%20div.html

simulateur

 

Simulateur Maison !

🥷For free

https://dupontdenis.github.io/TestSelecteurDemo/

Cours 3

✈ Grid !

👍 Test : Simulateur Grid

A quoi sert la maitrise des sélecteurs !

 


A comparer avec



DS : 10 minutes

Trouvez 3 selecteurs qui sélectionne uniquement le paragraphe avec Mickey.

  1. <h1>Demo of the .class selector</h1>

  3. <div class="intro">
  4.   <p>My name is Donald.</p>
  5.   <p>I live in Duckburg.</p>
  6. </div>

  8. <p>My best friend is Pluto.</p>

  10. <p data-search="true" class="intro">My best friend is Mickey.</p>

Plus d'infos »

Préparation au DS

 



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

footer
Inscription à : Commentaires (Atom)