CSS • Chapter 7 • Foundations to Production
Modern Pseudo-Classes
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
7.1 is
is is part of the CSS system covered in Chapter 7. 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 is in Chapter 7, 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 is, 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 7, topic 1.
Concept in plain language
is is part of the CSS system covered in Chapter 7. 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 pricing table for is. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 7, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the lesson sidebar example for is. Predict the visual difference before reloading the page. Chapter 7, topic 1, example 2.
Example 3: Narrow-screen test
Test is in the contact form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 7, topic 1, example 3.
Example 4: Translated-text test
Translate the button group into a language with longer labels while using is. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 7, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the data table to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 7, topic 1, example 5.
Example 6: Accessibility test
Check is in the media player with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 7, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the notification and determine why the declaration for is wins or loses using the browser's Styles and Computed panels. Chapter 7, topic 1, example 7.
Example 8: Content-stress test
Fill the language selector with very long words, URLs, translated text, images, and nested controls. Adjust is without hiding meaningful content. Chapter 7, topic 1, example 8.
Example 9: Refactoring test
Rewrite the course card so is uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 7, topic 1, example 9.
Example 10: Production review
Review is in the navigation bar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 7, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<h2>Balanced heading</h2>
<style>
:is(h1,h2,h3) { text-wrap: balance; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate is.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :is() groups selector alternatives without repeating the rest of the selector.
- 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 is 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 7, topic 1.
Practice exercise
Build a fresh example for is from Chapter 7. 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.
7.2 where
where is part of the CSS system covered in Chapter 7. 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 where in Chapter 7, 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 where, 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 7, topic 2.
Concept in plain language
where is part of the CSS system covered in Chapter 7. 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 button group for where. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 7, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the data table example for where. Predict the visual difference before reloading the page. Chapter 7, topic 2, example 2.
Example 3: Narrow-screen test
Test where in the media player at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 7, topic 2, example 3.
Example 4: Translated-text test
Translate the notification into a language with longer labels while using where. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 7, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the language selector to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 7, topic 2, example 5.
Example 6: Accessibility test
Check where in the course card with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 7, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the navigation bar and determine why the declaration for where wins or loses using the browser's Styles and Computed panels. Chapter 7, topic 2, example 7.
Example 8: Content-stress test
Fill the article with very long words, URLs, translated text, images, and nested controls. Adjust where without hiding meaningful content. Chapter 7, topic 2, example 8.
Example 9: Refactoring test
Rewrite the profile panel so where uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 7, topic 2, example 9.
Example 10: Production review
Review where in the search form for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 7, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<article class="article"><p>Readable paragraph</p></article>
<style>
:where(.article, .lesson) p { max-inline-size: 70ch; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate where.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :where() groups selectors with zero specificity contribution.
- 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 where 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 7, topic 2.
Practice exercise
Build a fresh example for where from Chapter 7. 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.
7.3 has
has is part of the CSS system covered in Chapter 7. 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 has in Chapter 7, 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 has, 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 7, topic 3.
Concept in plain language
has is part of the CSS system covered in Chapter 7. 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 notification for has. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 7, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the language selector example for has. Predict the visual difference before reloading the page. Chapter 7, topic 3, example 2.
Example 3: Narrow-screen test
Test has in the course card at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 7, topic 3, example 3.
Example 4: Translated-text test
Translate the navigation bar into a language with longer labels while using has. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 7, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the article to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 7, topic 3, example 5.
Example 6: Accessibility test
Check has in the profile panel with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 7, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the search form and determine why the declaration for has wins or loses using the browser's Styles and Computed panels. Chapter 7, topic 3, example 7.
Example 8: Content-stress test
Fill the dashboard with very long words, URLs, translated text, images, and nested controls. Adjust has without hiding meaningful content. Chapter 7, topic 3, example 8.
Example 9: Refactoring test
Rewrite the photo gallery so has uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 7, topic 3, example 9.
Example 10: Production review
Review has in the pricing table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 7, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<article class="card"><img src="photo.webp" alt=""><p>Photo card</p></article>
<style>
.card:has(img) { padding-block-start: 0; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate has.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :has() lets a selector respond to matching descendants or relatives.
- 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 has 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 7, topic 3.
Practice exercise
Build a fresh example for has from Chapter 7. 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.
7.4 focus-within
focus-within is part of the CSS system covered in Chapter 7. 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-within in Chapter 7, 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-within, 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 7, topic 4.
Concept in plain language
focus-within is part of the CSS system covered in Chapter 7. 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 navigation bar for focus-within. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 7, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the article example for focus-within. Predict the visual difference before reloading the page. Chapter 7, topic 4, example 2.
Example 3: Narrow-screen test
Test focus-within in the profile panel at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 7, topic 4, example 3.
Example 4: Translated-text test
Translate the search form into a language with longer labels while using focus-within. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 7, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the dashboard to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 7, topic 4, example 5.
Example 6: Accessibility test
Check focus-within in the photo gallery with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 7, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the pricing table and determine why the declaration for focus-within wins or loses using the browser's Styles and Computed panels. Chapter 7, topic 4, example 7.
Example 8: Content-stress test
Fill the lesson sidebar with very long words, URLs, translated text, images, and nested controls. Adjust focus-within without hiding meaningful content. Chapter 7, topic 4, example 8.
Example 9: Refactoring test
Rewrite the contact form so focus-within uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 7, topic 4, example 9.
Example 10: Production review
Review focus-within in the button group for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 7, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<label class="field">Name <input></label>
<style>
.field:focus-within { outline: 2px solid #2563eb; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate focus-within.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :focus-within matches a container when it or a descendant has focus.
- 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-within 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 7, topic 4.
Practice exercise
Build a fresh example for focus-within from Chapter 7. 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.
7.5 user-invalid
user-invalid is part of the CSS system covered in Chapter 7. 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 user-invalid in Chapter 7, 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 user-invalid, 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 7, topic 5.
Concept in plain language
user-invalid is part of the CSS system covered in Chapter 7. 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 search form for user-invalid. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 7, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the dashboard example for user-invalid. Predict the visual difference before reloading the page. Chapter 7, topic 5, example 2.
Example 3: Narrow-screen test
Test user-invalid in the photo gallery at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 7, topic 5, example 3.
Example 4: Translated-text test
Translate the pricing table into a language with longer labels while using user-invalid. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 7, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the lesson sidebar to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 7, topic 5, example 5.
Example 6: Accessibility test
Check user-invalid in the contact form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 7, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the button group and determine why the declaration for user-invalid wins or loses using the browser's Styles and Computed panels. Chapter 7, topic 5, example 7.
Example 8: Content-stress test
Fill the data table with very long words, URLs, translated text, images, and nested controls. Adjust user-invalid without hiding meaningful content. Chapter 7, topic 5, example 8.
Example 9: Refactoring test
Rewrite the media player so user-invalid uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 7, topic 5, example 9.
Example 10: Production review
Review user-invalid in the notification for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 7, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<input type="email" required value="not-an-email">
<style>
input:user-invalid { border-color: #dc2626; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate user-invalid.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :user-invalid can style a field after user interaction when constraint validation fails.
- 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 user-invalid 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 7, topic 5.
Practice exercise
Build a fresh example for user-invalid from Chapter 7. 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 7 review — 10 questions and answers
1. What should you inspect first when is does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for is. Then reduce the example until the winning declaration is clear.
2. How should is be checked before publishing?
Answer: Test is 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 where does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for where. Then reduce the example until the winning declaration is clear.
4. How should where be checked before publishing?
Answer: Test where 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 has does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for has. Then reduce the example until the winning declaration is clear.
6. How should has be checked before publishing?
Answer: Test has 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 focus-within does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for focus-within. Then reduce the example until the winning declaration is clear.
8. How should focus-within be checked before publishing?
Answer: Test focus-within 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 user-invalid does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for user-invalid. Then reduce the example until the winning declaration is clear.
10. How should user-invalid be checked before publishing?
Answer: Test user-invalid 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.