Baner
Level 1
plateIntuition: For at vælge alle elementer af en type angiver du bare typen.
Level 2
bentoIntuition: For at vælge alle elementer af en type angiver du bare typen.
Level 3
#fancyIntuition: Brug en ID-selector. Brug enten [id="fancy"] eller genvejen for id, "#".
Level 4
plate appleIntuition: En descendant selector lader dig vælge børneelementer af et andet element.
Level 5
#fancy pickleIntuition: Vi vil have en pickle inde i en forælder med id="fancy". Det er en kombination af descendant- og ID-selectors.
Level 6
.smallIntuition: Class-selector. Med ".small" vælger vi alle elementer med den class.
Level 7
orange.smallIntuition: Kombination med class-selectoren. Vi vælger alle appelsiner med classen. Husk, at vi ikke behøver skrive class, men bare bruger "." (punktum).
Level 8
bento orange.smallIntuition: Nu bruger vi det, vi har lært. Vi vil have et bento-element med et orange-barn, der har classen "small".
Level 9
bento, plateIntuition: Komma-kombinatoren. Brug et komma mellem dine selectors for at kombinere dem.
Level 10
*Intuition: Brug stjernen, "*", til at vælge alt.
Level 11
plate *Intuition: Kombinér med den universelle selector.
Level 12
plate + appleIntuition: Vi kan bruge adjacent sibling-selectoren til at vælge alle æbler lige efter en tallerken.
Level 13
bento ~ pickleIntuition: Brug general sibling-selectoren til at få alle pickle-elementer efter en bento.
Level 14
plate > appleIntuition: Vi bruger child-selectoren til at vælge de æbler, der er direkte børn af en tallerken.
Level 15
orange:first-childIntuition: For at vælge det første barn i en gruppe af børn bruger du first-child-pseudo-selectoren.
Level 16
plate > :only-childIntuition: Brug only-child-pseudo-selectoren, ":only-child", så vi kun kigger på tallerkener med ét barn. Derefter bruger vi "plate >" til at vælge alle børn af en tallerken.
Level 17
.small:last-childIntuition: Vi vil kun kigge på de sidste børneelementer, så vi bruger last-child-pseudo-selectoren, ":last-child". Elementerne har classen "small". Pro-tip: Husk, at vi bruger "." (punktum) for class.
Level 18
:nth-child(3)Intuition: Vi bruger nth-child-pseudo-selectoren, "nth-child(3)", og angiver bare, at vi vil finde et element, der er det tredje barn af et andet element. Havde vi flere elementer med 3 eller flere børn, kunne vi bruge "plate:nth-child(3)".
Level 19
bento:nth-last-child(3)Intuition: Vi vælger det 3. barn fra slutningen med nth-last-child-selectoren, ":nth-last-child(3)". Bagefter angiver vi, at vi kun vil kigge på "bento"-elementer.
Level 20
apple:first-of-typeIntuition: Vi bruger first-of-type-selectoren, ":first-of-type", og angiver derefter, at vi vil kigge på æbler.
Level 21
:nth-of-type(even)Intuition: Med nth-of-type-selectoren, ":nth-of-type(even)", vælger vi alle lige elementer. I vores tilfælde er tallerkener de eneste elementer.
Level 22
:nth-of-type(2n+3)Intuition: Vi vil vælge hvert andet element startende fra (og med) den tredje forekomst. Vi kunne gøre det endnu mere specifikt med "plate:nth-of-type(2n+3)", hvis der var forskellige elementer.
Level 23
apple:only-of-typeIntuition: Med only-of-type-selectoren, ":only-of-type", vælger vi apple-elementet, hvis det er det eneste af sin type i sit forældreelement. Du kan indsnævre valget med "plate apple:only-of-type".
Level 24
.small:last-of-typeIntuition: Med last-of-type-selectoren finder vi det sidste element med classen small.
Level 25
bento:emptyIntuition: Vi bruger empty-selectoren, ":empty", til at finde alle tomme bentoer.
Level 26
apple:not(.small)Intuition: Nu er det tid til negations-pseudo-classen, ":not". Her vælger vi alle æbler, der ikke har classen "small".
Level 27
[for]Intuition: Vi bruger attribut-selectoren og vælger alle elementer med en "for="-attribut.
Level 28
plate[for]Intuition: Igen bruger vi attribut-selectoren og angiver, at vi vil vælge alle tallerkener med en "for="-attribut.
Level 29
[for="Vitaly"]Intuition: For at vælge Vitalys måltid bruger vi attributværdi-selectoren og søger efter den specifikke for-værdi, "Vitaly".
Level 30
[for^="Sa"]Intuition: Brug attribute starts with-selectoren og angiv tegnene "Sa".
Level 31
[for$="ato"]Intuition: Ligesom i level 30 kan vi bruge attribute ends with-selectoren og søge efter for-attributværdier, der ender på "ato".
Level 32
[for*="obb"]Intuition: Brug attribut-wildcard-selectoren på for-attributten med værdien "obb".
