Master advanced CSS selectors and targeting techniques. Learn specificity rules, combinators, and pseudo-selectors to precisely style any element.
CSS selectors are the foundation of all styling - they determine which HTML elements receive your styles. While basic selectors like 'h1' and '.class' are powerful, CSS offers an extensive selection system that rivals the precision of a surgeon's scalpel.
Modern web development demands sophisticated targeting techniques. Whether you're styling the first item in a navigation menu, targeting links that open in new windows, or creating hover effects for specific elements, advanced selectors give you pixel-perfect control over your designs.
In this comprehensive lesson, you'll master CSS's complete selector arsenal, understand how specificity governs style application, and learn to create complex selector chains that target elements with surgical precision. These skills separate professional developers from beginners.
CSS provides multiple selector types, each designed for specific targeting scenarios. Understanding when and how to use each selector type is crucial for efficient styling.
**1. Universal Selector (*)**
Targets every element on the page - use sparingly for global resets.
1* {
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5}2. Element Selectors (Type Selectors)
Target all instances of an HTML element.
1h1 { color: #2563eb; }
2p { line-height: 1.6; }
3button { cursor: pointer; }3. Class Selectors (.class)
Target elements with specific class attributes - most commonly used.
1.btn { padding: 10px 20px; }
2.highlight { background-color: yellow; }
3.nav-item { display: inline-block; }4. ID Selectors (#id)
Target unique elements - use sparingly due to high specificity.
1#header { position: fixed; top: 0; }
2#main-content { max-width: 1200px; }5. Attribute Selectors
Target elements based on their attributes and attribute values.
1[type="email"] { border: 2px solid blue; }
2[href^="https"] { color: green; }
3[class*="btn"] { border-radius: 4px; }Best Practices:
CSS specificity determines which styles are applied when multiple rules target the same element. Understanding specificity is crucial for debugging CSS conflicts and writing maintainable code.
Specificity Hierarchy (Highest to Lowest):
1. Inline Styles (1000 points)
1<p style="color: red;">Highest specificity</p>2. IDs (100 points each)
1#header { color: blue; } /* Specificity: 100 */
2#nav #logo { color: green; } /* Specificity: 200 */3. Classes, Attributes, Pseudo-classes (10 points each)
1.btn { color: blue; } /* Specificity: 10 */
2.btn:hover { color: red; } /* Specificity: 20 */
3.nav .btn[type="submit"] { } /* Specificity: 31 */4. Elements and Pseudo-elements (1 point each)
1p { color: black; } /* Specificity: 1 */
2div p span { color: gray; } /* Specificity: 3 */Calculating Specificity Example:
1/* Specificity: 0-1-2-1 = 121 */
2body .sidebar .nav-item:hover { }
3
4/* Breakdown:
5 - 0 inline styles
6 - 1 ID (#sidebar if it were an ID)
7 - 2 classes (.sidebar, .nav-item)
8 - 1 pseudo-class (:hover)
9 - 1 element (body)
10 Total: 121 */Specificity Best Practices:
The !important Override:
1.text { color: blue !important; } /* Overrides almost everything */Use !important sparingly - it makes CSS harder to maintain and debug.
Pseudo-classes and pseudo-elements provide powerful ways to target elements based on their state, position, or content, enabling dynamic styling without JavaScript.
Pseudo-classes (:pseudo-class)
Target elements in specific states or positions.
1. User Action Pseudo-classes:
1a:link { color: blue; } /* Unvisited links */
2a:visited { color: purple; } /* Visited links */
3a:hover { color: red; } /* Mouse hover */
4a:active { color: orange; } /* Being clicked */
5button:focus { outline: 2px solid blue; }
6input:focus { border-color: #2563eb; }2. Structural Pseudo-classes:
1li:first-child { font-weight: bold; }
2li:last-child { border-bottom: none; }
3tr:nth-child(even) { background-color: #f5f5f5; }
4tr:nth-child(odd) { background-color: white; }
5p:nth-of-type(3) { color: red; }3. Form State Pseudo-classes:
1input:required { border-left: 3px solid red; }
2input:valid { border-color: green; }
3input:invalid { border-color: red; }
4input:disabled { opacity: 0.5; }
5input:checked + label { font-weight: bold; }Pseudo-elements (::pseudo-element)
Create virtual elements to style specific parts of content.
1. Content Pseudo-elements:
1p::first-line { font-weight: bold; }
2p::first-letter { font-size: 2em; float: left; }
3::selection { background-color: yellow; }2. Generated Content:
1.quote::before { content: '"'; font-size: 2em; }
2.quote::after { content: '"'; font-size: 2em; }
3.external-link::after { content: " ↗"; }Advanced Pseudo-class Examples:
1/* Target empty elements */
2div:empty { display: none; }
3
4/* Target elements containing specific text */
5a[href*="pdf"]::after { content: " (PDF)"; }
6
7/* Complex nth-child patterns */
8li:nth-child(3n+1) { color: red; } /* 1st, 4th, 7th, etc. */
9li:nth-child(-n+3) { font-weight: bold; } /* First 3 items */Real-world Applications:
CSS combinators define relationships between selectors, allowing you to target elements based on their position relative to other elements in the HTML structure.
1. Descendant Combinator (space)
Targets elements that are descendants (children, grandchildren, etc.) of another element.
1nav a { color: white; } /* All links inside nav */
2.sidebar p { font-size: 14px; } /* All paragraphs in sidebar */
3article img { max-width: 100%; } /* All images in articles */2. Child Combinator (>)
Targets direct children only (not grandchildren).
1nav > ul { list-style: none; } /* Direct ul children of nav */
2.card > h2 { margin-top: 0; } /* Direct h2 children of .card */
3.menu > li > a { display: block; } /* Links in direct menu items */3. Adjacent Sibling Combinator (+)
Targets the immediately following sibling element.
1h1 + p { font-size: 18px; } /* First paragraph after h1 */
2img + p { margin-top: 15px; } /* Paragraph immediately after image */
3input + label { margin-left: 10px; } /* Label right after input */4. General Sibling Combinator (~)
Targets all following sibling elements.
1h2 ~ p { color: gray; } /* All paragraphs after h2 */
2.active ~ .nav-item { opacity: 0.7; } /* All nav items after active */Complex Combinator Examples:
1/* Target the first paragraph in each article */
2article > p:first-child { font-size: 18px; }
3
4/* Style links in navigation, but not in dropdown menus */
5nav > ul > li > a { color: white; }
6
7/* Target all paragraphs that follow a heading */
8h1 ~ p, h2 ~ p, h3 ~ p { margin-left: 20px; }
9
10/* Style form labels that come after invalid inputs */
11input:invalid + label { color: red; }Practical Applications:
1. Navigation Styling:
1/* Main navigation links */
2.main-nav > ul > li > a {
3 padding: 15px 20px;
4 color: white;
5}
6
7/* Dropdown menu styling */
8.main-nav li ul a {
9 padding: 10px 15px;
10 background: rgba(0,0,0,0.1);
11}2. Form Enhancement:
1/* Style labels after required inputs */
2input:required + label::after {
3 content: " *";
4 color: red;
5}
6
7/* Style valid/invalid form sections */
8.form-section:has(input:invalid) {
9 border-left: 3px solid red;
10}3. Content Layout:
1/* Add spacing between article sections */
2article section + section {
3 margin-top: 40px;
4 padding-top: 20px;
5 border-top: 1px solid #eee;
6}Best Practices:
A comprehensive demonstration of all CSS selector types, specificity rules, pseudo-classes, pseudo-elements, and combinators in action.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Selectors & Targeting - Complete Showcase</title>
7 <style>
8 /* =================
9 UNIVERSAL SELECTOR
10 ================= */
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16
17 /* =================
18 ELEMENT SELECTORS
19 ================= */
20 body {
21 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22 line-height: 1.6;
23 color: #333;
24 background-color: #f8fafc;
25 }
26
27 h1 {
28 color: #1e40af;
29 font-size: 2.5rem;
30 text-align: center;
31 margin-bottom: 2rem;
32 }
33
34 h2 {
35 color: #2563eb;
36 font-size: 1.5rem;
37 margin-bottom: 1rem;
38 padding-bottom: 0.5rem;
39 border-bottom: 2px solid #e5e7eb;
40 }
41
42 p {
43 margin-bottom: 1rem;
44 line-height: 1.7;
45 }
46
47 /* =================
48 CLASS SELECTORS
49 ================= */
50 .container {
51 max-width: 1200px;
52 margin: 0 auto;
53 padding: 20px;
54 }
55
56 .section {
57 background: white;
58 margin-bottom: 2rem;
59 padding: 2rem;
60 border-radius: 12px;
61 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
62 }
63
64 .highlight {
65 background-color: #fef3c7;
66 padding: 2px 6px;
67 border-radius: 4px;
68 font-weight: 600;
69 }
70
71 .btn {
72 display: inline-block;
73 padding: 12px 24px;
74 background-color: #3b82f6;
75 color: white;
76 text-decoration: none;
77 border-radius: 8px;
78 transition: background-color 0.3s ease;
79 border: none;
80 cursor: pointer;
81 font-size: 16px;
82 }
83
84 .btn-secondary {
85 background-color: #6b7280;
86 }
87
88 .nav-menu {
89 background-color: #1f2937;
90 border-radius: 8px;
91 padding: 1rem;
92 }
93
94 .nav-item {
95 display: inline-block;
96 margin-right: 1rem;
97 }
98
99 /* =================
100 ID SELECTORS
101 ================= */
102 #main-header {
103 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
104 color: white;
105 padding: 3rem 2rem;
106 border-radius: 12px;
107 margin-bottom: 2rem;
108 text-align: center;
109 }
110
111 #specificity-demo {
112 border: 3px solid #f59e0b;
113 background-color: #fef3c7;
114 }
115
116 /* =================
117 ATTRIBUTE SELECTORS
118 ================= */
119 /* Target all input elements with type="email" */
120 input[type="email"] {
121 border: 2px solid #3b82f6;
122 background-color: #eff6ff;
123 }
124
125 /* Target links that start with "https" */
126 a[href^="https"]::before {
127 content: "🔒 ";
128 color: #10b981;
129 }
130
131 /* Target all elements with class containing "btn" */
132 [class*="btn"] {
133 font-weight: 600;
134 text-transform: uppercase;
135 letter-spacing: 0.5px;
136 }
137
138 /* Target elements with specific data attributes */
139 [data-tooltip] {
140 position: relative;
141 cursor: help;
142 border-bottom: 1px dotted #6b7280;
143 }
144
145 /* =================
146 PSEUDO-CLASSES
147 ================= */
148
149 /* User action pseudo-classes */
150 .btn:hover {
151 background-color: #2563eb;
152 transform: translateY(-2px);
153 box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
154 }
155
156 .btn:active {
157 transform: translateY(0);
158 box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
159 }
160
161 .btn:focus {
162 outline: 3px solid #93c5fd;
163 outline-offset: 2px;
164 }
165
166 /* Structural pseudo-classes */
167 .demo-list li:first-child {
168 font-weight: bold;
169 color: #dc2626;
170 }
171
172 .demo-list li:last-child {
173 font-style: italic;
174 color: #059669;
175 }
176
177 .demo-list li:nth-child(even) {
178 background-color: #f3f4f6;
179 padding: 8px;
180 border-radius: 4px;
181 }
182
183 .demo-list li:nth-child(3n) {
184 border-left: 4px solid #8b5cf6;
185 padding-left: 12px;
186 }
187
188 /* Form pseudo-classes */
189 input:focus {
190 border-color: #3b82f6;
191 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
192 outline: none;
193 }
194
195 input:valid {
196 border-color: #10b981;
197 }
198
199 input:invalid:not(:placeholder-shown) {
200 border-color: #ef4444;
201 }
202
203 input:required + label::after {
204 content: " *";
205 color: #dc2626;
206 font-weight: bold;
207 }
208
209 /* =================
210 PSEUDO-ELEMENTS
211 ================= */
212
213 .quote::before {
214 content: """;
215 font-size: 3rem;
216 color: #6366f1;
217 line-height: 1;
218 float: left;
219 margin-right: 8px;
220 }
221
222 .quote::after {
223 content: """;
224 font-size: 3rem;
225 color: #6366f1;
226 line-height: 1;
227 }
228
229 .external-link::after {
230 content: " ↗";
231 color: #6b7280;
232 font-size: 0.8em;
233 }
234
235 p::first-letter {
236 font-size: 1.5em;
237 font-weight: bold;
238 color: #7c3aed;
239 }
240
241 .section h2::first-line {
242 color: #1d4ed8;
243 }
244
245 ::selection {
246 background-color: #fbbf24;
247 color: #1f2937;
248 }
249
250 /* =================
251 COMBINATORS
252 ================= */
253
254 /* Descendant combinator (space) */
255 .nav-menu a {
256 color: #e5e7eb;
257 text-decoration: none;
258 padding: 8px 16px;
259 border-radius: 6px;
260 transition: all 0.3s ease;
261 }
262
263 .nav-menu a:hover {
264 background-color: #374151;
265 color: white;
266 }
267
268 /* Child combinator (>) */
269 .demo-section > p {
270 font-size: 18px;
271 color: #4b5563;
272 }
273
274 .nav-menu > ul > li > a {
275 display: block;
276 font-weight: 500;
277 }
278
279 /* Adjacent sibling combinator (+) */
280 h2 + p {
281 font-size: 18px;
282 color: #1f2937;
283 font-weight: 500;
284 }
285
286 .form-group input + label {
287 margin-left: 8px;
288 color: #6b7280;
289 }
290
291 /* General sibling combinator (~) */
292 .highlight ~ p {
293 padding-left: 20px;
294 border-left: 3px solid #e5e7eb;
295 }
296
297 /* =================
298 COMPLEX SELECTORS
299 ================= */
300
301 /* Multiple classes */
302 .btn.btn-secondary:hover {
303 background-color: #4b5563;
304 }
305
306 /* Complex combinations */
307 .section .demo-list li:nth-child(odd):hover {
308 background-color: #ddd6fe;
309 transform: scale(1.02);
310 transition: all 0.2s ease;
311 }
312
313 /* Attribute + pseudo-class */
314 input[type="email"]:focus:valid {
315 border-color: #10b981;
316 background-color: #ecfdf5;
317 }
318
319 /* =================
320 SPECIFICITY DEMO
321 ================= */
322
323 /* Specificity: 1 (element) */
324 p { color: gray; }
325
326 /* Specificity: 10 (class) */
327 .text { color: blue; }
328
329 /* Specificity: 100 (ID) */
330 #specificity-demo { color: orange; }
331
332 /* Specificity: 111 (ID + class + element) */
333 #specificity-demo.text p { color: purple; }
334
335 /* =================
336 RESPONSIVE HELPERS
337 ================= */
338
339 @media (max-width: 768px) {
340 .container {
341 padding: 10px;
342 }
343
344 h1 {
345 font-size: 2rem;
346 }
347
348 .section {
349 padding: 1rem;
350 }
351 }
352
353 /* =================
354 INTERACTIVE ELEMENTS
355 ================= */
356
357 .tooltip {
358 position: relative;
359 }
360
361 .tooltip:hover::after {
362 content: attr(data-tooltip);
363 position: absolute;
364 bottom: 125%;
365 left: 50%;
366 transform: translateX(-50%);
367 background-color: #1f2937;
368 color: white;
369 padding: 8px 12px;
370 border-radius: 6px;
371 font-size: 14px;
372 white-space: nowrap;
373 z-index: 1000;
374 }
375
376 .tooltip:hover::before {
377 content: "";
378 position: absolute;
379 bottom: 115%;
380 left: 50%;
381 transform: translateX(-50%);
382 border: 5px solid transparent;
383 border-top-color: #1f2937;
384 }
385
386 /* =================
387 FORM STYLING
388 ================= */
389
390 .form-group {
391 margin-bottom: 1.5rem;
392 }
393
394 .form-group label {
395 display: block;
396 margin-bottom: 0.5rem;
397 font-weight: 600;
398 color: #374151;
399 }
400
401 .form-group input {
402 width: 100%;
403 padding: 12px;
404 border: 2px solid #d1d5db;
405 border-radius: 8px;
406 font-size: 16px;
407 transition: all 0.3s ease;
408 }
409
410 /* =================
411 UTILITY CLASSES
412 ================= */
413
414 .text-center { text-align: center; }
415 .mb-2 { margin-bottom: 1rem; }
416 .mt-2 { margin-top: 1rem; }
417 .p-4 { padding: 2rem; }
418 </style>
419</head>
420<body>
421 <div class="container">
422 <!-- Header with ID selector -->
423 <header id="main-header">
424 <h1>🎯 CSS Selectors & Targeting Mastery</h1>
425 <p>A comprehensive showcase of CSS selector power and precision</p>
426 </header>
427
428 <!-- Navigation with descendant and child combinators -->
429 <nav class="nav-menu">
430 <ul>
431 <li class="nav-item"><a href="#basics">Basics</a></li>
432 <li class="nav-item"><a href="#advanced">Advanced</a></li>
433 <li class="nav-item"><a href="https://developer.mozilla.org" class="external-link">MDN Docs</a></li>
434 <li class="nav-item"><a href="#contact">Contact</a></li>
435 </ul>
436 </nav>
437
438 <!-- Element Selectors Section -->
439 <section class="section">
440 <h2>Element Selectors</h2>
441 <p>This paragraph demonstrates basic element selectors. The h2 above and this p tag are styled using simple element selectors.</p>
442 <p>Element selectors target all instances of an HTML element type. They're fundamental but should be used thoughtfully to avoid over-broad styling.</p>
443 </section>
444
445 <!-- Class Selectors Section -->
446 <section class="section">
447 <h2>Class Selectors</h2>
448 <p>Classes provide the most <span class="highlight">flexible and reusable</span> way to style elements. This paragraph uses the .section class for styling.</p>
449 <p>The highlighted text above uses a .highlight class to demonstrate targeted styling within content.</p>
450
451 <div class="text-center mt-2">
452 <button class="btn">Primary Button</button>
453 <button class="btn btn-secondary">Secondary Button</button>
454 </div>
455 </section>
456
457 <!-- ID Selector and Specificity Demo -->
458 <section class="section" id="specificity-demo">
459 <h2>ID Selectors & Specificity</h2>
460 <p class="text">This section has an ID (#specificity-demo) and demonstrates CSS specificity in action. Notice how the orange background from the ID selector takes precedence.</p>
461 <p>IDs have higher specificity than classes, which have higher specificity than elements. This creates a hierarchy that determines which styles are applied.</p>
462 </section>
463
464 <!-- Attribute Selectors Section -->
465 <section class="section">
466 <h2>Attribute Selectors</h2>
467 <p>Attribute selectors target elements based on their attributes and values. Check out the form below:</p>
468
469 <div class="form-group">
470 <label for="email">Email Address</label>
471 <input type="email" id="email" placeholder="Enter your email" required>
472 </div>
473
474 <div class="form-group">
475 <label for="name">Full Name</label>
476 <input type="text" id="name" placeholder="Enter your name" required>
477 </div>
478
479 <p>The email input above is styled differently using <code>input[type="email"]</code> selector.</p>
480 </section>
481
482 <!-- Pseudo-classes Section -->
483 <section class="section">
484 <h2>Pseudo-classes in Action</h2>
485 <p>Pseudo-classes target elements in specific states or positions. Here's a demonstration:</p>
486
487 <ul class="demo-list">
488 <li>First item (styled with :first-child)</li>
489 <li>Second item (even, gets background)</li>
490 <li>Third item (every 3rd gets blue border)</li>
491 <li>Fourth item (even, gets background)</li>
492 <li>Fifth item (normal styling)</li>
493 <li>Sixth item (even + every 3rd gets both styles)</li>
494 <li>Last item (styled with :last-child)</li>
495 </ul>
496
497 <p>Try hovering over the list items above to see :hover effects in action!</p>
498 </section>
499
500 <!-- Pseudo-elements Section -->
501 <section class="section">
502 <h2>Pseudo-elements Magic</h2>
503 <p class="quote">This paragraph uses ::before and ::after pseudo-elements to add decorative quotation marks automatically generated by CSS.</p>
504
505 <p>Pseudo-elements create virtual elements that don't exist in HTML. The first letter of this paragraph is enlarged using the ::first-letter pseudo-element.</p>
506
507 <p>Try selecting some text to see the custom ::selection styling with yellow background!</p>
508 </section>
509
510 <!-- Combinators Section -->
511 <section class="section demo-section">
512 <h2>Combinators & Relationships</h2>
513 <p>This paragraph is styled using the child combinator (>) which targets direct children of .demo-section.</p>
514
515 <div>
516 <p>This nested paragraph uses descendant selector styling since it's inside a div within .demo-section.</p>
517 </div>
518
519 <p class="highlight">Highlighted paragraph that affects subsequent paragraphs.</p>
520 <p>This paragraph is styled differently because it follows a .highlight element (general sibling combinator ~).</p>
521 <p>This one too! All paragraphs after .highlight get the special styling.</p>
522 </section>
523
524 <!-- Complex Selectors Section -->
525 <section class="section">
526 <h2>Complex Selector Combinations</h2>
527 <p>Real-world CSS often requires combining multiple selector types for precise targeting.</p>
528
529 <div class="text-center">
530 <span class="tooltip" data-tooltip="This tooltip appears on hover using attribute selectors and pseudo-elements!">Hover over this text</span>
531 </div>
532
533 <p class="mb-2">Complex selectors can combine classes, pseudo-classes, and attributes for surgical precision in styling.</p>
534 </section>
535
536 <!-- Interactive Demo Section -->
537 <section class="section">
538 <h2>🚀 Interactive Selector Playground</h2>
539 <p>This showcase demonstrates every major CSS selector type:</p>
540
541 <ul class="demo-list mb-2">
542 <li>✅ Universal Selector (*)</li>
543 <li>✅ Element Selectors (h1, p, div)</li>
544 <li>✅ Class Selectors (.section, .highlight)</li>
545 <li>✅ ID Selectors (#main-header, #specificity-demo)</li>
546 <li>✅ Attribute Selectors ([type="email"], [href^="https"])</li>
547 <li>✅ Pseudo-classes (:hover, :nth-child, :focus)</li>
548 <li>✅ Pseudo-elements (::before, ::after, ::first-letter)</li>
549 <li>✅ Combinators (descendant, child, sibling)</li>
550 </ul>
551
552 <div class="text-center">
553 <button class="btn">Explore More Selectors</button>
554 </div>
555 </section>
556
557 <!-- Footer with complex selectors -->
558 <footer class="section text-center" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
559 <h2 style="color: white; border-bottom: 2px solid rgba(255,255,255,0.3);">🎉 Selector Mastery Achieved!</h2>
560 <p>You've now seen CSS selectors in action - from basic element targeting to complex pseudo-element combinations. Master these patterns and you'll have surgical control over any design!</p>
561 <p><strong>Key Skills Demonstrated:</strong> Specificity Rules | Advanced Selectors | Combinator Relationships | Pseudo-element Magic</p>
562 </footer>
563 </div>
564</body>
565</html>This comprehensive demonstration showcases every aspect of CSS Selectors & Targeting covered in Lesson 2:
🎯 Complete Selector Coverage:
**1. Universal Selector (*):**
2. Element Selectors:
3. Class Selectors:
4. ID Selectors:
5. Attribute Selectors:
6. Pseudo-classes - User Actions:
7. Pseudo-classes - Structural:
8. Pseudo-elements:
9. Combinators - All Types:
10. Complex Selector Combinations:
11. Specificity Examples:
12. Real-World Applications:
13. Advanced Techniques:
This showcase serves as both a learning tool and reference guide, demonstrating how CSS selectors combine to create sophisticated, interactive, and maintainable stylesheets. Every selector type and technique from the lesson is represented with practical, real-world examples that developers encounter daily.
Outstanding work mastering CSS selectors and targeting! You now have surgical precision in targeting any element on a webpage. Next, we'll explore "Colors & Typography" where you'll learn to create beautiful color schemes, master typography principles, and bring your designs to life with professional text styling. Get ready to make your websites not just functional, but visually stunning!
Your progress is saved in this browser, on this device only.