Løsninger til CSS Diner

Baner

Level 1

plate

Intuition: For at vælge alle elementer af en type angiver du bare typen.

Level 2

bento

Intuition: For at vælge alle elementer af en type angiver du bare typen.

Level 3

#fancy

Intuition: Brug en ID-selector. Brug enten [id="fancy"] eller genvejen for id, "#".

Level 4

plate apple

Intuition: En descendant selector lader dig vælge børneelementer af et andet element.

Level 5

#fancy pickle

Intuition: Vi vil have en pickle inde i en forælder med id="fancy". Det er en kombination af descendant- og ID-selectors.

Level 6

.small

Intuition: Class-selector. Med ".small" vælger vi alle elementer med den class.

Level 7

orange.small

Intuition: 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.small

Intuition: 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, plate

Intuition: 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 + apple

Intuition: Vi kan bruge adjacent sibling-selectoren til at vælge alle æbler lige efter en tallerken.

Level 13

bento ~ pickle

Intuition: Brug general sibling-selectoren til at få alle pickle-elementer efter en bento.

Level 14

plate > apple

Intuition: Vi bruger child-selectoren til at vælge de æbler, der er direkte børn af en tallerken.

Level 15

orange:first-child

Intuition: For at vælge det første barn i en gruppe af børn bruger du first-child-pseudo-selectoren.

Level 16

plate > :only-child

Intuition: 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-child

Intuition: 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-type

Intuition: 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-type

Intuition: 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-type

Intuition: Med last-of-type-selectoren finder vi det sidste element med classen small.

Level 25

bento:empty

Intuition: 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".