CSS • Chapter 6 • Foundations to Production
Pseudo-Classes
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
6.1 hover
hover is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For hover in Chapter 6, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for hover, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 6, topic 1.
Concept in plain language
hover is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal course card for hover. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 6, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the navigation bar example for hover. Predict the visual difference before reloading the page. Chapter 6, topic 1, example 2.
Example 3: Narrow-screen test
Test hover in the article at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 6, topic 1, example 3.
Example 4: Translated-text test
Translate the profile panel into a language with longer labels while using hover. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 6, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the search form to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 6, topic 1, example 5.
Example 6: Accessibility test
Check hover in the dashboard with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 6, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the photo gallery and determine why the declaration for hover wins or loses using the browser's Styles and Computed panels. Chapter 6, topic 1, example 7.
Example 8: Content-stress test
Fill the pricing table with very long words, URLs, translated text, images, and nested controls. Adjust hover without hiding meaningful content. Chapter 6, topic 1, example 8.
Example 9: Refactoring test
Rewrite the lesson sidebar so hover uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 6, topic 1, example 9.
Example 10: Production review
Review hover in the contact form for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 6, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<button class="button">Hover me</button>
<style>
.button:hover { transform: translateY(-2px); }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate hover.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :hover applies while a pointing device is over the element.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates hover without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 6, topic 1.
Practice exercise
Build a fresh example for hover from Chapter 6. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
6.2 focus-visible
focus-visible is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For focus-visible in Chapter 6, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for focus-visible, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 6, topic 2.
Concept in plain language
focus-visible is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal profile panel for focus-visible. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 6, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the search form example for focus-visible. Predict the visual difference before reloading the page. Chapter 6, topic 2, example 2.
Example 3: Narrow-screen test
Test focus-visible in the dashboard at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 6, topic 2, example 3.
Example 4: Translated-text test
Translate the photo gallery into a language with longer labels while using focus-visible. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 6, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the pricing table to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 6, topic 2, example 5.
Example 6: Accessibility test
Check focus-visible in the lesson sidebar with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 6, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the contact form and determine why the declaration for focus-visible wins or loses using the browser's Styles and Computed panels. Chapter 6, topic 2, example 7.
Example 8: Content-stress test
Fill the button group with very long words, URLs, translated text, images, and nested controls. Adjust focus-visible without hiding meaningful content. Chapter 6, topic 2, example 8.
Example 9: Refactoring test
Rewrite the data table so focus-visible uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 6, topic 2, example 9.
Example 10: Production review
Review focus-visible in the media player for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 6, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<button class="button">Tab to me</button>
<style>
.button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate focus-visible.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :focus-visible provides a keyboard-friendly focus indicator.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates focus-visible without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 6, topic 2.
Practice exercise
Build a fresh example for focus-visible from Chapter 6. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
6.3 first-child
first-child is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For first-child in Chapter 6, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for first-child, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 6, topic 3.
Concept in plain language
first-child is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal photo gallery for first-child. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 6, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the pricing table example for first-child. Predict the visual difference before reloading the page. Chapter 6, topic 3, example 2.
Example 3: Narrow-screen test
Test first-child in the lesson sidebar at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 6, topic 3, example 3.
Example 4: Translated-text test
Translate the contact form into a language with longer labels while using first-child. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 6, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the button group to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 6, topic 3, example 5.
Example 6: Accessibility test
Check first-child in the data table with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 6, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the media player and determine why the declaration for first-child wins or loses using the browser's Styles and Computed panels. Chapter 6, topic 3, example 7.
Example 8: Content-stress test
Fill the notification with very long words, URLs, translated text, images, and nested controls. Adjust first-child without hiding meaningful content. Chapter 6, topic 3, example 8.
Example 9: Refactoring test
Rewrite the language selector so first-child uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 6, topic 3, example 9.
Example 10: Production review
Review first-child in the course card for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 6, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<ul class="list"><li>First</li><li>Second</li></ul>
<style>
.list li:first-child { font-weight: 800; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate first-child.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :first-child matches an element that is the first child of its parent.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates first-child without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 6, topic 3.
Practice exercise
Build a fresh example for first-child from Chapter 6. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
6.4 nth-child
nth-child is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For nth-child in Chapter 6, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for nth-child, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 6, topic 4.
Concept in plain language
nth-child is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal contact form for nth-child. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 6, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the button group example for nth-child. Predict the visual difference before reloading the page. Chapter 6, topic 4, example 2.
Example 3: Narrow-screen test
Test nth-child in the data table at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 6, topic 4, example 3.
Example 4: Translated-text test
Translate the media player into a language with longer labels while using nth-child. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 6, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the notification to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 6, topic 4, example 5.
Example 6: Accessibility test
Check nth-child in the language selector with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 6, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the course card and determine why the declaration for nth-child wins or loses using the browser's Styles and Computed panels. Chapter 6, topic 4, example 7.
Example 8: Content-stress test
Fill the navigation bar with very long words, URLs, translated text, images, and nested controls. Adjust nth-child without hiding meaningful content. Chapter 6, topic 4, example 8.
Example 9: Refactoring test
Rewrite the article so nth-child uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 6, topic 4, example 9.
Example 10: Production review
Review nth-child in the profile panel for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 6, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<ul class="list"><li>A</li><li>B</li><li>C</li><li>D</li></ul>
<style>
.list li:nth-child(2n) { background: #f8fafc; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate nth-child.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :nth-child(2n) matches even-numbered list items.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates nth-child without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 6, topic 4.
Practice exercise
Build a fresh example for nth-child from Chapter 6. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
6.5 not
not is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For not in Chapter 6, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for not, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 6, topic 5.
Concept in plain language
not is part of the CSS system covered in Chapter 6. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal media player for not. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 6, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the notification example for not. Predict the visual difference before reloading the page. Chapter 6, topic 5, example 2.
Example 3: Narrow-screen test
Test not in the language selector at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 6, topic 5, example 3.
Example 4: Translated-text test
Translate the course card into a language with longer labels while using not. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 6, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the navigation bar to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 6, topic 5, example 5.
Example 6: Accessibility test
Check not in the article with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 6, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the profile panel and determine why the declaration for not wins or loses using the browser's Styles and Computed panels. Chapter 6, topic 5, example 7.
Example 8: Content-stress test
Fill the search form with very long words, URLs, translated text, images, and nested controls. Adjust not without hiding meaningful content. Chapter 6, topic 5, example 8.
Example 9: Refactoring test
Rewrite the dashboard so not uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 6, topic 5, example 9.
Example 10: Production review
Review not in the photo gallery for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 6, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<article class="card">Normal</article><article class="card featured">Featured</article>
<style>
.card:not(.featured) { opacity: .75; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate not.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :not() excludes matching elements.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates not without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 6, topic 5.
Practice exercise
Build a fresh example for not from Chapter 6. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
Chapter 6 review — 10 questions and answers
1. What should you inspect first when hover does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for hover. Then reduce the example until the winning declaration is clear.
2. How should hover be checked before publishing?
Answer: Test hover on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
3. What should you inspect first when focus-visible does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for focus-visible. Then reduce the example until the winning declaration is clear.
4. How should focus-visible be checked before publishing?
Answer: Test focus-visible on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
5. What should you inspect first when first-child does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for first-child. Then reduce the example until the winning declaration is clear.
6. How should first-child be checked before publishing?
Answer: Test first-child on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
7. What should you inspect first when nth-child does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for nth-child. Then reduce the example until the winning declaration is clear.
8. How should nth-child be checked before publishing?
Answer: Test nth-child on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
9. What should you inspect first when not does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for not. Then reduce the example until the winning declaration is clear.
10. How should not be checked before publishing?
Answer: Test not on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.