semaine 10
Cours | Cours FLEX : après le placement vient le temps de la flexibilité QCM à 8H30 |
TD/ DM | |
QCM | 8H30 sur e-campus |
QCM
Pour révision du QCM du 31
La question suivante est inspirée des exemples de Mozilla.
Pour télécharger ces exemples : vidéo
@Sans modifier le HTML :
| <ul> | ||
| <li><a href="">Home</a></li> | ||
| <li><a href="">Category</a></li> | ||
| <li><a href="">Sub-Category</a></li> | ||
| <li><span aria-current="page">Product</span></li> | ||
|
Pour comprendre la différence entre inline et inline-block, je vous propose d'écrire :
li {
display:inline;
border:1px solid;
width:200px;
}
et ensuite
li {
display:inline-block;
border:1px solid;
width:200px;
}
Nous verrons l'intérêt de donner, comme sur l'exemple de Mozilla, au conteneur ul la propriété display:flex.
@Qui sélectionne le dernier p
- .Y.Z
- p ~ p + p ~ p
- p.YZ
- p
- #last.Z
- div ~ article :nth-of-type(4)
- article > p#last\.Z
- p.last-child
Bonnes réponses :
1. sélectionne les balises de classe Y et Z donc le dernier p
2. le dernier p a un précédent p qui a un précédent immédiat p qui a un précédent p
6. le dernier p est en 4 position dans un article qui a un div comme précédent.
7. recherche du dernier p par son identifiant last.Z (attention au .)
Pour
3. il faudrait que la classe du dernier p soit class="YZ"
5) cela sélectionnerait un id de nom #last avec la classe Z, la bonne écriture est #last\.Z. Il faut éviter des noms d’identifiant avec un point, sinon, il faut les echapper par l'utilisation de \.
8) la bonne réponse serait p:last-child et non p de classe last-child.
@<li>Item 1</li>
<li data-code="codeA">Item 2</li>
<li data-code="codeA codeB">Item 3</li>
<li data-code="codeAB">Item 4</li>
Quel sélecteur d'attribut permet de sélectionner les items possédant l'attribut data-code="codeA" ( à savoir les Item = 2 et 3)
La réponse est [data-code~="codeA"]
si vous mettez [data-code*="codeA"], nous aurions également item4.
li[data-code="codeA"] ne sélectionne que Item2.
Entrainement :Auto-revision
GitHub
🆒How to : Après avoir cloné https://github.com/mdn/css-examples.git .
🔩Lancez le server sur /learn/selectors/attribute.html.
Vous testerez, par exemple, votre compréhension des sélecteurs d'attribut.
Correction : menu déroulant
Correction
Voici un exemple de code pour le projet : menu déroulant.
💥Travail personnel
Modifier le CSS pour afficher des menus doublement imbriqués puis modifiez le CSS.
https://codepen.io/dupontcodepen/pen/oNYGGWB
Inscription à :
Articles (Atom)