<p title="Strophe1" id="st">P1</p>
<h1></h1>
<h2></h2>
</header><p class="refrain">P2</p>
<p title="Strophe4" id="str">P3</p>
<p class="refrain" id="ref4">P4</p>
</article>
DM : 👾 trouvez un bug
Vous connaisez déjà ce fichier de Test (lien)
Voici un ensemble de selecteurs qui encadrent le second div.
👿 BUG !
Tout semble parfait, mais le selecteur div:last-child {border:1px solid;} devrait lui aussi selectionner le second DIV.
Il n'en ai rien. Trouvez l'explication à ce comportement.
Verifier votre hypothèse avec ce selecteur !DM
Testez dans l'éditeur CSS ci-dessus la régle
article p:nth-child(4) { border : 1px solid; }
🤡 Expliquez le résultat !
</article>
Projet entreprise
Z-index
Analyser et corriger le code
 |
| https://dupontdenis.github.io/cssPostion-useCase/ |
 |
| Correction |
Positionnement
Cours
https://sites.google.com/view/duponthtml/position?authuser=0
Position absolue !
Code pour le TD -> github
Testez votre connaissance : ici
Objectif
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
- #div1 #div2
- div:nth-child(-n+2)
- div:not(div+div+div)
- [class^="sel"]
- #div1 && #div2
- div:not(div:nth-last-child(3) ~ div)
- [class="sel"]
- div:not(div~div+div)
- div:first-child, div:first-child+div
- div:nth-child(1), div:nth-child(2)
- div:nth-of-tydive(-n+2)
- div:not(div:nth-child(n+3))
- [class$="sel"]
- [id="div2"],[id="div1"]
- div:nth-last-child(n+3)
- div[class]
- div:not(div:nth-last-child(-n+2))
- div:not(#div3,#div4)
- div:not(#div3,div:last-child)
- 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.
- 😡#div1 #div2
Exemple 2 : les valeurs Positives de -n+2 sont données dans le tableau
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.
- 😡#div1 #div2
- ❎div:nth-child(-n+2)
Code pour s'entraîner
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=p, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="./pos.css"> | |
| </head> | |
| <body> | |
| <section class="demo"> | |
| <div><code> bloc 1</code></div> | |
| <div><code> bloc 2</code></div> | |
| <div><code> bloc 3</code></div> | |
| </section> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* pos */ | |
| /* SETTINGS */ | |
| :root { | |
| --color-off-white: #f3f4f4; | |
| --color-stroke: #dadce0; | |
| --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; | |
| } | |
| .demo>* { | |
| height: 20vh; | |
| padding: 1em; | |
| display: grid; | |
| place-items: end; | |
| } | |
| .demo>*+* { | |
| /* opacity: 0.75; */ | |
| box-shadow: 0 -1px 10px rgba(0 0 0 / 60%); | |
| } | |
| .demo> :first-child { | |
| background: aliceblue; | |
| border: 2px solid lightblue; | |
| } | |
| .demo> :nth-child(2) { | |
| background: pink; | |
| border: 2px solid hotpink; | |
| } | |
| .demo> :last-child { | |
| background: wheat; | |
| border: 2px solid gold; | |
| } | |
| code { | |
| padding: 0.125em 0.25em; | |
| background: var(--color-off-white); | |
| border: 1px solid var(--color-stroke); | |
| font-family: var(--font-mono); | |
| font-size: 1.25em; | |
| hyphens: none; | |
| tab-size: 2; | |
| text-align: left; | |
| word-spacing: normal; | |
| word-break: normal; | |
| word-wrap: normal; | |
| } |
Les 5 selecteurs à maîtriser
Pour selectionner des éléments avec des attributs :
🥈 Class
Test : Trouver le selecteur de class pour selectionner le premier para X :
La structure d'une page HTML est un arbre, on utilise le vocabulaire :
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
DM
Quelle selecteur donne le résultat ?
Sans toucher au HTML, trouver la valeur du selecteur ?? permettant d'encadrer para03
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 |
Inscription à :
Articles (Atom)