When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.
CSS :nth-child(An+B of S) first filters an element’s siblings with selector list S, then counts the matching siblings in document order using one-based positions, and finally tests those positions against An+B. This is different from placing the same selector outside :nth-child(), because the outside form counts all siblings before filtering the subject. The optional of clause solves practical jobs such as zebra-striping visible table rows, selecting the first three important items, or counting only eligible cards. Mastery means naming the candidate set before doing arithmetic, distinguishing filtered counting from subject filtering, and managing selector specificity and fallbacks deliberately. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.
The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.
Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.
Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.
Find your next learning step
Choose the route that matches the present difficulty. Use the complete index for a systematic course.
Build the model
Chapters 1-4 . Begin here, then continue after the learner can predict, verify and explain.
Use the core tools
Chapters 5-8 . Begin here, then continue after the learner can predict, verify and explain.
Handle boundaries
Chapters 9-12 . Begin here, then continue after the learner can predict, verify and explain.
Debug and verify
Chapters 13-16 . Begin here, then continue after the learner can predict, verify and explain.
Transfer with judgment
Chapters 17-20 . Begin here, then continue after the learner can predict, verify and explain.
Open the full chapter index . Jump to capstone practice . Use the How Studying Works hub . Read the official documentation
Complete chapter index
Chapters 1-4 . Build the model
Chapters 5-8 . Use the core tools
Chapters 9-12 . Handle boundaries
Chapters 13-16 . Debug and verify
CHAPTER 1 OF 20 . Build the model
1. An+B describes positions in a one-based sibling list
The first candidate has index 1, and the formula selects positive indexes generated by An+B. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is counting the first child as zero because programming arrays often do. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for An+B describes positions in a one-based sibling list, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the An+B describes positions in a one-based sibling list chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on counting the first child as zero because programming arrays often do. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.item:nth-child(1){outline:3px solid}Explained result. The first sibling item is selected by position 1. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework checklist. Predict the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The first candidate has index 1, and the formula selects positive indexes generated by An+B.” Apply this procedure: State the contract for An+B describes positions in a one-based sibling list, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first sibling item is selected by position 1. For the homework checklist, add one near-miss that exposes counting the first child as zero because programming arrays often do. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading table. Contrast the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The first candidate has index 1, and the formula selects positive indexes generated by An+B.” Apply this procedure: State the contract for An+B describes positions in a one-based sibling list, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first sibling item is selected by position 1. For the reading table, add one near-miss that exposes counting the first child as zero because programming arrays often do. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science cards. Stress-test the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The first candidate has index 1, and the formula selects positive indexes generated by An+B.” Apply this procedure: State the contract for An+B describes positions in a one-based sibling list, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first sibling item is selected by position 1. For the science cards, add one near-miss that exposes counting the first child as zero because programming arrays often do. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA roster. Explain the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The first candidate has index 1, and the formula selects positive indexes generated by An+B.” Apply this procedure: State the contract for An+B describes positions in a one-based sibling list, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first sibling item is selected by position 1. For the CCA roster, add one near-miss that exposes counting the first child as zero because programming arrays often do. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers counting the first child as zero because programming arrays often do.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for An+B describes positions in a one-based sibling list, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from An+B describes positions in a one-based sibling list?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing counting the first child as zero because programming arrays often do be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library catalogue with available titles are selected by filtered position. Include one ordinary case, one boundary and one deliberate failure caused by counting the first child as zero because programming arrays often do. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The first candidate has index 1, and the formula selects positive indexes generated by An+B. It shows a trace, not only a final value. The ordinary case should demonstrate “The first sibling item is selected by position 1.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for An+B describes positions in a one-based sibling list, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For An+B describes positions in a one-based sibling list, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
odd represents 2n+1 and even represents 2n for positive candidate positions. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is treating odd and even as element attributes. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for odd and even are formula shorthands, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the odd and even are formula shorthands chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating odd and even as element attributes. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.row:nth-child(even){background:#f2f2f2}Explained result. The second, fourth and later even-positioned sibling rows receive the background. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science cards. Contrast the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “odd represents 2n+1 and even represents 2n for positive candidate positions.” Apply this procedure: State the contract for odd and even are formula shorthands, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The second, fourth and later even-positioned sibling rows receive the background. For the science cards, add one near-miss that exposes treating odd and even as element attributes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA roster. Stress-test the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “odd represents 2n+1 and even represents 2n for positive candidate positions.” Apply this procedure: State the contract for odd and even are formula shorthands, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The second, fourth and later even-positioned sibling rows receive the background. For the CCA roster, add one near-miss that exposes treating odd and even as element attributes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Explain the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “odd represents 2n+1 and even represents 2n for positive candidate positions.” Apply this procedure: State the contract for odd and even are formula shorthands, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The second, fourth and later even-positioned sibling rows receive the background. For the family planner, add one near-miss that exposes treating odd and even as element attributes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Transfer the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “odd represents 2n+1 and even represents 2n for positive candidate positions.” Apply this procedure: State the contract for odd and even are formula shorthands, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The second, fourth and later even-positioned sibling rows receive the background. For the library catalogue, add one near-miss that exposes treating odd and even as element attributes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers treating odd and even as element attributes.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for odd and even are formula shorthands, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from odd and even are formula shorthands?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating odd and even as element attributes be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with odd, even, negative ranges, selector lists and invalid syntax expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by treating odd and even as element attributes. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: odd represents 2n+1 and even represents 2n for positive candidate positions. It shows a trace, not only a final value. The ordinary case should demonstrate “The second, fourth and later even-positioned sibling rows receive the background.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for odd and even are formula shorthands, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For odd and even are formula shorthands, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
In :nth-child(An+B of S), only siblings matching S form the indexed candidate list. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is counting every sibling and checking S only afterward. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The of clause filters before counting, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the The of clause filters before counting chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on counting every sibling and checking S only afterward. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.task:nth-child(-n+3 of .open){border-left:4px solid green}Explained result. Among open siblings, the first three are selected even when closed tasks appear between them. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Stress-test the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “In :nth-child(An+B of S), only siblings matching S form the indexed candidate list.” Apply this procedure: State the contract for The of clause filters before counting, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Among open siblings, the first three are selected even when closed tasks appear between them. For the family planner, add one near-miss that exposes counting every sibling and checking S only afterward. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Explain the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “In :nth-child(An+B of S), only siblings matching S form the indexed candidate list.” Apply this procedure: State the contract for The of clause filters before counting, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Among open siblings, the first three are selected even when closed tasks appear between them. For the library catalogue, add one near-miss that exposes counting every sibling and checking S only afterward. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Transfer the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “In :nth-child(An+B of S), only siblings matching S form the indexed candidate list.” Apply this procedure: State the contract for The of clause filters before counting, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Among open siblings, the first three are selected even when closed tasks appear between them. For the test laboratory, add one near-miss that exposes counting every sibling and checking S only afterward. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Predict the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “In :nth-child(An+B of S), only siblings matching S form the indexed candidate list.” Apply this procedure: State the contract for The of clause filters before counting, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Among open siblings, the first three are selected even when closed tasks appear between them. For the design decision, add one near-miss that exposes counting every sibling and checking S only afterward. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers counting every sibling and checking S only afterward.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for The of clause filters before counting, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from The of clause filters before counting?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing counting every sibling and checking S only afterward be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with filtered nth-child is compared with classes, nth-of-type and DOM restructuring. Include one ordinary case, one boundary and one deliberate failure caused by counting every sibling and checking S only afterward. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: In :nth-child(An+B of S), only siblings matching S form the indexed candidate list. It shows a trace, not only a final value. The ordinary case should demonstrate “Among open siblings, the first three are selected even when closed tasks appear between them.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for The of clause filters before counting, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The of clause filters before counting, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
S:nth-child(An+B) counts all siblings first and then requires the subject to match S. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S). It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Outside filtering has a different meaning, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Outside filtering has a different meaning chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S). Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.important:nth-child(-n+3){font-weight:700}Explained result. Only important elements that are also among the first three siblings match; later important elements do not move forward. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Explain the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “S:nth-child(An+B) counts all siblings first and then requires the subject to match S.” Apply this procedure: State the contract for Outside filtering has a different meaning, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Only important elements that are also among the first three siblings match; later important elements do not move forward. For the test laboratory, add one near-miss that exposes calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S). The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Transfer the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “S:nth-child(An+B) counts all siblings first and then requires the subject to match S.” Apply this procedure: State the contract for Outside filtering has a different meaning, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Only important elements that are also among the first three siblings match; later important elements do not move forward. For the design decision, add one near-miss that exposes calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S). The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework checklist. Predict the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “S:nth-child(An+B) counts all siblings first and then requires the subject to match S.” Apply this procedure: State the contract for Outside filtering has a different meaning, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Only important elements that are also among the first three siblings match; later important elements do not move forward. For the homework checklist, add one near-miss that exposes calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S). The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading table. Contrast the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “S:nth-child(An+B) counts all siblings first and then requires the subject to match S.” Apply this procedure: State the contract for Outside filtering has a different meaning, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Only important elements that are also among the first three siblings match; later important elements do not move forward. For the reading table, add one near-miss that exposes calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S). The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S).
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Outside filtering has a different meaning, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from Outside filtering has a different meaning?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S) be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework checklist with only incomplete tasks are counted before the first three are highlighted. Include one ordinary case, one boundary and one deliberate failure caused by calling S:nth-child(-n+3) identical to :nth-child(-n+3 of S). Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: S:nth-child(An+B) counts all siblings first and then requires the subject to match S. It shows a trace, not only a final value. The ordinary case should demonstrate “Only important elements that are also among the first three siblings match; later important elements do not move forward.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Outside filtering has a different meaning, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Outside filtering has a different meaning, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 5 OF 20 . Use the core tools
5. The subject still has to match the outer selector
A rule such as li:nth-child(odd of .active) applies only to li subjects, while the candidate list comes from .active siblings. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming the of list replaces every selector before the pseudo-class. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The subject still has to match the outer selector, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the The subject still has to match the outer selector chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming the of list replaces every selector before the pseudo-class. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
li:nth-child(odd of .active){background:gold}Explained result. Active siblings are counted, but a matching subject must also be an li for this whole rule. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework checklist. Transfer the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A rule such as li:nth-child(odd of .active) applies only to li subjects, while the candidate list comes from .active siblings.” Apply this procedure: State the contract for The subject still has to match the outer selector, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Active siblings are counted, but a matching subject must also be an li for this whole rule. For the homework checklist, add one near-miss that exposes assuming the of list replaces every selector before the pseudo-class. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading table. Predict the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A rule such as li:nth-child(odd of .active) applies only to li subjects, while the candidate list comes from .active siblings.” Apply this procedure: State the contract for The subject still has to match the outer selector, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Active siblings are counted, but a matching subject must also be an li for this whole rule. For the reading table, add one near-miss that exposes assuming the of list replaces every selector before the pseudo-class. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science cards. Contrast the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A rule such as li:nth-child(odd of .active) applies only to li subjects, while the candidate list comes from .active siblings.” Apply this procedure: State the contract for The subject still has to match the outer selector, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Active siblings are counted, but a matching subject must also be an li for this whole rule. For the science cards, add one near-miss that exposes assuming the of list replaces every selector before the pseudo-class. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA roster. Stress-test the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A rule such as li:nth-child(odd of .active) applies only to li subjects, while the candidate list comes from .active siblings.” Apply this procedure: State the contract for The subject still has to match the outer selector, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Active siblings are counted, but a matching subject must also be an li for this whole rule. For the CCA roster, add one near-miss that exposes assuming the of list replaces every selector before the pseudo-class. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming the of list replaces every selector before the pseudo-class.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for The subject still has to match the outer selector, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from The subject still has to match the outer selector?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming the of list replaces every selector before the pseudo-class be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny reading table with visible rows retain zebra striping when hidden rows remain in the DOM. Include one ordinary case, one boundary and one deliberate failure caused by assuming the of list replaces every selector before the pseudo-class. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A rule such as li:nth-child(odd of .active) applies only to li subjects, while the candidate list comes from .active siblings. It shows a trace, not only a final value. The ordinary case should demonstrate “Active siblings are counted, but a matching subject must also be an li for this whole rule.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for The subject still has to match the outer selector, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The subject still has to match the outer selector, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 6 OF 20 . Use the core tools
6. A selector list can define several eligible groups
The S component can be a comma-separated complex-real-selector-list, so several conditions can join the candidate set. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is writing separate nth-child rules whose counts restart differently. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A selector list can define several eligible groups, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the A selector list can define several eligible groups chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on writing separate nth-child rules whose counts restart differently. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.card:nth-child(odd of .ready,.featured){outline:2px solid}Explained result. Ready or featured siblings share one filtered sequence, and its odd positions match. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science cards. Predict the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The S component can be a comma-separated complex-real-selector-list, so several conditions can join the candidate set.” Apply this procedure: State the contract for A selector list can define several eligible groups, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Ready or featured siblings share one filtered sequence, and its odd positions match. For the science cards, add one near-miss that exposes writing separate nth-child rules whose counts restart differently. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA roster. Contrast the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The S component can be a comma-separated complex-real-selector-list, so several conditions can join the candidate set.” Apply this procedure: State the contract for A selector list can define several eligible groups, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Ready or featured siblings share one filtered sequence, and its odd positions match. For the CCA roster, add one near-miss that exposes writing separate nth-child rules whose counts restart differently. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Stress-test the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The S component can be a comma-separated complex-real-selector-list, so several conditions can join the candidate set.” Apply this procedure: State the contract for A selector list can define several eligible groups, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Ready or featured siblings share one filtered sequence, and its odd positions match. For the family planner, add one near-miss that exposes writing separate nth-child rules whose counts restart differently. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Explain the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The S component can be a comma-separated complex-real-selector-list, so several conditions can join the candidate set.” Apply this procedure: State the contract for A selector list can define several eligible groups, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Ready or featured siblings share one filtered sequence, and its odd positions match. For the library catalogue, add one near-miss that exposes writing separate nth-child rules whose counts restart differently. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers writing separate nth-child rules whose counts restart differently.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for A selector list can define several eligible groups, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from A selector list can define several eligible groups?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing writing separate nth-child rules whose counts restart differently be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science cards with only valid samples participate in a repeating three-card rhythm. Include one ordinary case, one boundary and one deliberate failure caused by writing separate nth-child rules whose counts restart differently. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The S component can be a comma-separated complex-real-selector-list, so several conditions can join the candidate set. It shows a trace, not only a final value. The ordinary case should demonstrate “Ready or featured siblings share one filtered sequence, and its odd positions match.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for A selector list can define several eligible groups, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For A selector list can define several eligible groups, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 7 OF 20 . Use the core tools
7. Minus n plus a number selects the first N candidates
The pattern -n+3 generates the positive indexes 3, 2 and 1. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is reading the minus sign as selecting from the end. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Minus n plus a number selects the first N candidates, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Minus n plus a number selects the first N candidates chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on reading the minus sign as selecting from the end. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.item:nth-child(-n+3 of .eligible){font-weight:700}Explained result. The first three eligible siblings are selected. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Contrast the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The pattern -n+3 generates the positive indexes 3, 2 and 1.” Apply this procedure: State the contract for Minus n plus a number selects the first N candidates, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first three eligible siblings are selected. For the family planner, add one near-miss that exposes reading the minus sign as selecting from the end. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Stress-test the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The pattern -n+3 generates the positive indexes 3, 2 and 1.” Apply this procedure: State the contract for Minus n plus a number selects the first N candidates, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first three eligible siblings are selected. For the library catalogue, add one near-miss that exposes reading the minus sign as selecting from the end. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Explain the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The pattern -n+3 generates the positive indexes 3, 2 and 1.” Apply this procedure: State the contract for Minus n plus a number selects the first N candidates, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first three eligible siblings are selected. For the test laboratory, add one near-miss that exposes reading the minus sign as selecting from the end. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Transfer the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The pattern -n+3 generates the positive indexes 3, 2 and 1.” Apply this procedure: State the contract for Minus n plus a number selects the first N candidates, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first three eligible siblings are selected. For the design decision, add one near-miss that exposes reading the minus sign as selecting from the end. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers reading the minus sign as selecting from the end.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Minus n plus a number selects the first N candidates, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from Minus n plus a number selects the first N candidates?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading the minus sign as selecting from the end be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA roster with eligible members are counted without removing ineligible entries. Include one ordinary case, one boundary and one deliberate failure caused by reading the minus sign as selecting from the end. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The pattern -n+3 generates the positive indexes 3, 2 and 1. It shows a trace, not only a final value. The ordinary case should demonstrate “The first three eligible siblings are selected.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Minus n plus a number selects the first N candidates, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Minus n plus a number selects the first N candidates, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 8 OF 20 . Use the core tools
8. n plus a number selects from a threshold onward
The pattern n+4 matches candidate positions 4, 5, 6 and beyond. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is expecting exactly the fourth candidate only. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for n plus a number selects from a threshold onward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the n plus a number selects from a threshold onward chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on expecting exactly the fourth candidate only. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.item:nth-child(n+4 of .eligible){opacity:.7}Explained result. Every eligible candidate from the fourth onward matches. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Stress-test the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The pattern n+4 matches candidate positions 4, 5, 6 and beyond.” Apply this procedure: State the contract for n plus a number selects from a threshold onward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every eligible candidate from the fourth onward matches. For the test laboratory, add one near-miss that exposes expecting exactly the fourth candidate only. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Explain the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The pattern n+4 matches candidate positions 4, 5, 6 and beyond.” Apply this procedure: State the contract for n plus a number selects from a threshold onward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every eligible candidate from the fourth onward matches. For the design decision, add one near-miss that exposes expecting exactly the fourth candidate only. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework checklist. Transfer the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The pattern n+4 matches candidate positions 4, 5, 6 and beyond.” Apply this procedure: State the contract for n plus a number selects from a threshold onward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every eligible candidate from the fourth onward matches. For the homework checklist, add one near-miss that exposes expecting exactly the fourth candidate only. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading table. Predict the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The pattern n+4 matches candidate positions 4, 5, 6 and beyond.” Apply this procedure: State the contract for n plus a number selects from a threshold onward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every eligible candidate from the fourth onward matches. For the reading table, add one near-miss that exposes expecting exactly the fourth candidate only. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers expecting exactly the fourth candidate only.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for n plus a number selects from a threshold onward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from n plus a number selects from a threshold onward?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting exactly the fourth candidate only be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family planner with weekend cards form their own sequence among mixed days. Include one ordinary case, one boundary and one deliberate failure caused by expecting exactly the fourth candidate only. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The pattern n+4 matches candidate positions 4, 5, 6 and beyond. It shows a trace, not only a final value. The ordinary case should demonstrate “Every eligible candidate from the fourth onward matches.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for n plus a number selects from a threshold onward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For n plus a number selects from a threshold onward, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 9 OF 20 . Handle boundaries
9. A range can be made by intersecting two pseudo-classes
Two nth-child conditions on the same subject can impose lower and upper bounds on one candidate sequence. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is combining formulas that count different selector sets. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A range can be made by intersecting two pseudo-classes, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the A range can be made by intersecting two pseudo-classes chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on combining formulas that count different selector sets. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.item:nth-child(n+2 of .eligible):nth-child(-n+5 of .eligible){color:purple}Explained result. Eligible candidates two through five match because both filters use the same sequence. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework checklist. Explain the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Two nth-child conditions on the same subject can impose lower and upper bounds on one candidate sequence.” Apply this procedure: State the contract for A range can be made by intersecting two pseudo-classes, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Eligible candidates two through five match because both filters use the same sequence. For the homework checklist, add one near-miss that exposes combining formulas that count different selector sets. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading table. Transfer the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Two nth-child conditions on the same subject can impose lower and upper bounds on one candidate sequence.” Apply this procedure: State the contract for A range can be made by intersecting two pseudo-classes, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Eligible candidates two through five match because both filters use the same sequence. For the reading table, add one near-miss that exposes combining formulas that count different selector sets. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science cards. Predict the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Two nth-child conditions on the same subject can impose lower and upper bounds on one candidate sequence.” Apply this procedure: State the contract for A range can be made by intersecting two pseudo-classes, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Eligible candidates two through five match because both filters use the same sequence. For the science cards, add one near-miss that exposes combining formulas that count different selector sets. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA roster. Contrast the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Two nth-child conditions on the same subject can impose lower and upper bounds on one candidate sequence.” Apply this procedure: State the contract for A range can be made by intersecting two pseudo-classes, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Eligible candidates two through five match because both filters use the same sequence. For the CCA roster, add one near-miss that exposes combining formulas that count different selector sets. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers combining formulas that count different selector sets.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for A range can be made by intersecting two pseudo-classes, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from A range can be made by intersecting two pseudo-classes?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing combining formulas that count different selector sets be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library catalogue with available titles are selected by filtered position. Include one ordinary case, one boundary and one deliberate failure caused by combining formulas that count different selector sets. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Two nth-child conditions on the same subject can impose lower and upper bounds on one candidate sequence. It shows a trace, not only a final value. The ordinary case should demonstrate “Eligible candidates two through five match because both filters use the same sequence.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for A range can be made by intersecting two pseudo-classes, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For A range can be made by intersecting two pseudo-classes, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
Filtering with :not([hidden]) lets visible rows alternate even when hidden rows remain as siblings. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using tr:nth-child(even) and accepting stripe breaks after a hidden row. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Hidden rows can be removed from the stripe count, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Hidden rows can be removed from the stripe count chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using tr:nth-child(even) and accepting stripe breaks after a hidden row. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
tbody > tr:nth-child(even of :not([hidden])){background:#eee}Explained result. The second, fourth and later non-hidden rows are striped. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science cards. Transfer the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Filtering with :not([hidden]) lets visible rows alternate even when hidden rows remain as siblings.” Apply this procedure: State the contract for Hidden rows can be removed from the stripe count, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The second, fourth and later non-hidden rows are striped. For the science cards, add one near-miss that exposes using tr:nth-child(even) and accepting stripe breaks after a hidden row. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA roster. Predict the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Filtering with :not([hidden]) lets visible rows alternate even when hidden rows remain as siblings.” Apply this procedure: State the contract for Hidden rows can be removed from the stripe count, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The second, fourth and later non-hidden rows are striped. For the CCA roster, add one near-miss that exposes using tr:nth-child(even) and accepting stripe breaks after a hidden row. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Contrast the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Filtering with :not([hidden]) lets visible rows alternate even when hidden rows remain as siblings.” Apply this procedure: State the contract for Hidden rows can be removed from the stripe count, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The second, fourth and later non-hidden rows are striped. For the family planner, add one near-miss that exposes using tr:nth-child(even) and accepting stripe breaks after a hidden row. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Stress-test the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Filtering with :not([hidden]) lets visible rows alternate even when hidden rows remain as siblings.” Apply this procedure: State the contract for Hidden rows can be removed from the stripe count, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The second, fourth and later non-hidden rows are striped. For the library catalogue, add one near-miss that exposes using tr:nth-child(even) and accepting stripe breaks after a hidden row. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using tr:nth-child(even) and accepting stripe breaks after a hidden row.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Hidden rows can be removed from the stripe count, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from Hidden rows can be removed from the stripe count?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using tr:nth-child(even) and accepting stripe breaks after a hidden row be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with odd, even, negative ranges, selector lists and invalid syntax expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by using tr:nth-child(even) and accepting stripe breaks after a hidden row. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Filtering with :not([hidden]) lets visible rows alternate even when hidden rows remain as siblings. It shows a trace, not only a final value. The ordinary case should demonstrate “The second, fourth and later non-hidden rows are striped.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Hidden rows can be removed from the stripe count, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Hidden rows can be removed from the stripe count, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The related :nth-last-child(An+B of S) builds the filtered candidate list but indexes it from the last matching sibling. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using a negative A value when the actual job is last-to-first counting. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for nth-last-child counts from the end, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the nth-last-child counts from the end chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using a negative A value when the actual job is last-to-first counting. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.card:nth-last-child(-n+2 of .available){border-color:green}Explained result. The last two available sibling cards match. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Predict the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The related :nth-last-child(An+B of S) builds the filtered candidate list but indexes it from the last matching sibling.” Apply this procedure: State the contract for nth-last-child counts from the end, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The last two available sibling cards match. For the family planner, add one near-miss that exposes using a negative A value when the actual job is last-to-first counting. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Contrast the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The related :nth-last-child(An+B of S) builds the filtered candidate list but indexes it from the last matching sibling.” Apply this procedure: State the contract for nth-last-child counts from the end, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The last two available sibling cards match. For the library catalogue, add one near-miss that exposes using a negative A value when the actual job is last-to-first counting. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Stress-test the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The related :nth-last-child(An+B of S) builds the filtered candidate list but indexes it from the last matching sibling.” Apply this procedure: State the contract for nth-last-child counts from the end, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The last two available sibling cards match. For the test laboratory, add one near-miss that exposes using a negative A value when the actual job is last-to-first counting. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Explain the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The related :nth-last-child(An+B of S) builds the filtered candidate list but indexes it from the last matching sibling.” Apply this procedure: State the contract for nth-last-child counts from the end, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The last two available sibling cards match. For the design decision, add one near-miss that exposes using a negative A value when the actual job is last-to-first counting. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using a negative A value when the actual job is last-to-first counting.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for nth-last-child counts from the end, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from nth-last-child counts from the end?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using a negative A value when the actual job is last-to-first counting be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with filtered nth-child is compared with classes, nth-of-type and DOM restructuring. Include one ordinary case, one boundary and one deliberate failure caused by using a negative A value when the actual job is last-to-first counting. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The related :nth-last-child(An+B of S) builds the filtered candidate list but indexes it from the last matching sibling. It shows a trace, not only a final value. The ordinary case should demonstrate “The last two available sibling cards match.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for nth-last-child counts from the end, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For nth-last-child counts from the end, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 12 OF 20 . Handle boundaries
12. nth-of-type is not a filtered-class substitute
:nth-of-type counts siblings with the same expanded element name, while the of clause can filter by classes, attributes and richer selectors. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using nth-of-type to count only elements with a state class. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for nth-of-type is not a filtered-class substitute, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the nth-of-type is not a filtered-class substitute chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using nth-of-type to count only elements with a state class. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.book:nth-child(odd of .available){background:#fffbe8}Explained result. Only available siblings enter the count regardless of other classes or element states. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Contrast the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “:nth-of-type counts siblings with the same expanded element name, while the of clause can filter by classes, attributes and richer selectors.” Apply this procedure: State the contract for nth-of-type is not a filtered-class substitute, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Only available siblings enter the count regardless of other classes or element states. For the test laboratory, add one near-miss that exposes using nth-of-type to count only elements with a state class. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Stress-test the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “:nth-of-type counts siblings with the same expanded element name, while the of clause can filter by classes, attributes and richer selectors.” Apply this procedure: State the contract for nth-of-type is not a filtered-class substitute, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Only available siblings enter the count regardless of other classes or element states. For the design decision, add one near-miss that exposes using nth-of-type to count only elements with a state class. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework checklist. Explain the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “:nth-of-type counts siblings with the same expanded element name, while the of clause can filter by classes, attributes and richer selectors.” Apply this procedure: State the contract for nth-of-type is not a filtered-class substitute, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Only available siblings enter the count regardless of other classes or element states. For the homework checklist, add one near-miss that exposes using nth-of-type to count only elements with a state class. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading table. Transfer the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “:nth-of-type counts siblings with the same expanded element name, while the of clause can filter by classes, attributes and richer selectors.” Apply this procedure: State the contract for nth-of-type is not a filtered-class substitute, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Only available siblings enter the count regardless of other classes or element states. For the reading table, add one near-miss that exposes using nth-of-type to count only elements with a state class. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using nth-of-type to count only elements with a state class.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for nth-of-type is not a filtered-class substitute, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from nth-of-type is not a filtered-class substitute?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using nth-of-type to count only elements with a state class be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework checklist with only incomplete tasks are counted before the first three are highlighted. Include one ordinary case, one boundary and one deliberate failure caused by using nth-of-type to count only elements with a state class. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: :nth-of-type counts siblings with the same expanded element name, while the of clause can filter by classes, attributes and richer selectors. It shows a trace, not only a final value. The ordinary case should demonstrate “Only available siblings enter the count regardless of other classes or element states.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for nth-of-type is not a filtered-class substitute, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For nth-of-type is not a filtered-class substitute, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 13 OF 20 . Debug and verify
13. Specificity includes the pseudo-class and the strongest selector in S
The specificity of :nth-child(… of S) adds one pseudo-class plus the most specific complex selector in the list. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is counting only :nth-child and ignoring the of selector list. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Specificity includes the pseudo-class and the strongest selector in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Specificity includes the pseudo-class and the strongest selector in S chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on counting only :nth-child and ignoring the of selector list. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.card:nth-child(odd of #featured,.ready){color:navy}Explained result. The ID branch can raise the rule specificity even for matches reached through another branch. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework checklist. Stress-test the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The specificity of :nth-child(… of S) adds one pseudo-class plus the most specific complex selector in the list.” Apply this procedure: State the contract for Specificity includes the pseudo-class and the strongest selector in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The ID branch can raise the rule specificity even for matches reached through another branch. For the homework checklist, add one near-miss that exposes counting only :nth-child and ignoring the of selector list. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading table. Explain the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The specificity of :nth-child(… of S) adds one pseudo-class plus the most specific complex selector in the list.” Apply this procedure: State the contract for Specificity includes the pseudo-class and the strongest selector in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The ID branch can raise the rule specificity even for matches reached through another branch. For the reading table, add one near-miss that exposes counting only :nth-child and ignoring the of selector list. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science cards. Transfer the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The specificity of :nth-child(… of S) adds one pseudo-class plus the most specific complex selector in the list.” Apply this procedure: State the contract for Specificity includes the pseudo-class and the strongest selector in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The ID branch can raise the rule specificity even for matches reached through another branch. For the science cards, add one near-miss that exposes counting only :nth-child and ignoring the of selector list. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA roster. Predict the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The specificity of :nth-child(… of S) adds one pseudo-class plus the most specific complex selector in the list.” Apply this procedure: State the contract for Specificity includes the pseudo-class and the strongest selector in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The ID branch can raise the rule specificity even for matches reached through another branch. For the CCA roster, add one near-miss that exposes counting only :nth-child and ignoring the of selector list. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers counting only :nth-child and ignoring the of selector list.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Specificity includes the pseudo-class and the strongest selector in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from Specificity includes the pseudo-class and the strongest selector in S?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing counting only :nth-child and ignoring the of selector list be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny reading table with visible rows retain zebra striping when hidden rows remain in the DOM. Include one ordinary case, one boundary and one deliberate failure caused by counting only :nth-child and ignoring the of selector list. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The specificity of :nth-child(… of S) adds one pseudo-class plus the most specific complex selector in the list. It shows a trace, not only a final value. The ordinary case should demonstrate “The ID branch can raise the rule specificity even for matches reached through another branch.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Specificity includes the pseudo-class and the strongest selector in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Specificity includes the pseudo-class and the strongest selector in S, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
:where() contributes zero specificity, so placing alternatives inside :where can prevent the S list from escalating the selector. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming :where changes which elements are eligible. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for where can keep the filter specificity low, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the where can keep the filter specificity low chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming :where changes which elements are eligible. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.card:nth-child(odd of :where(.ready,.featured)){outline:2px solid}Explained result. The same ready-or-featured candidate idea remains, while :where itself adds no specificity. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science cards. Explain the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “:where() contributes zero specificity, so placing alternatives inside :where can prevent the S list from escalating the selector.” Apply this procedure: State the contract for where can keep the filter specificity low, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The same ready-or-featured candidate idea remains, while :where itself adds no specificity. For the science cards, add one near-miss that exposes assuming :where changes which elements are eligible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA roster. Transfer the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “:where() contributes zero specificity, so placing alternatives inside :where can prevent the S list from escalating the selector.” Apply this procedure: State the contract for where can keep the filter specificity low, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The same ready-or-featured candidate idea remains, while :where itself adds no specificity. For the CCA roster, add one near-miss that exposes assuming :where changes which elements are eligible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Predict the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “:where() contributes zero specificity, so placing alternatives inside :where can prevent the S list from escalating the selector.” Apply this procedure: State the contract for where can keep the filter specificity low, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The same ready-or-featured candidate idea remains, while :where itself adds no specificity. For the family planner, add one near-miss that exposes assuming :where changes which elements are eligible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Contrast the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “:where() contributes zero specificity, so placing alternatives inside :where can prevent the S list from escalating the selector.” Apply this procedure: State the contract for where can keep the filter specificity low, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The same ready-or-featured candidate idea remains, while :where itself adds no specificity. For the library catalogue, add one near-miss that exposes assuming :where changes which elements are eligible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming :where changes which elements are eligible.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for where can keep the filter specificity low, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from where can keep the filter specificity low?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming :where changes which elements are eligible be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science cards with only valid samples participate in a repeating three-card rhythm. Include one ordinary case, one boundary and one deliberate failure caused by assuming :where changes which elements are eligible. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: :where() contributes zero specificity, so placing alternatives inside :where can prevent the S list from escalating the selector. It shows a trace, not only a final value. The ordinary case should demonstrate “The same ready-or-featured candidate idea remains, while :where itself adds no specificity.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for where can keep the filter specificity low, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For where can keep the filter specificity low, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The of S grammar uses a complex-real-selector-list, so an invalid selector can invalidate the functional pseudo-class rather than being silently ignored. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming every selector list gets the forgiving behaviour of :is or :where. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for The selector list is unforgiving, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the The selector list is unforgiving chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming every selector list gets the forgiving behaviour of :is or :where. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.item:nth-child(odd of .ready, :unsupported-pseudo){color:red}Explained result. Do not rely on the valid branch surviving; test syntax and use supported selectors or a safe fallback. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Transfer the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The of S grammar uses a complex-real-selector-list, so an invalid selector can invalidate the functional pseudo-class rather than being silently ignored.” Apply this procedure: State the contract for The selector list is unforgiving, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Do not rely on the valid branch surviving; test syntax and use supported selectors or a safe fallback. For the family planner, add one near-miss that exposes assuming every selector list gets the forgiving behaviour of :is or :where. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Predict the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The of S grammar uses a complex-real-selector-list, so an invalid selector can invalidate the functional pseudo-class rather than being silently ignored.” Apply this procedure: State the contract for The selector list is unforgiving, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Do not rely on the valid branch surviving; test syntax and use supported selectors or a safe fallback. For the library catalogue, add one near-miss that exposes assuming every selector list gets the forgiving behaviour of :is or :where. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Contrast the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The of S grammar uses a complex-real-selector-list, so an invalid selector can invalidate the functional pseudo-class rather than being silently ignored.” Apply this procedure: State the contract for The selector list is unforgiving, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Do not rely on the valid branch surviving; test syntax and use supported selectors or a safe fallback. For the test laboratory, add one near-miss that exposes assuming every selector list gets the forgiving behaviour of :is or :where. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Stress-test the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The of S grammar uses a complex-real-selector-list, so an invalid selector can invalidate the functional pseudo-class rather than being silently ignored.” Apply this procedure: State the contract for The selector list is unforgiving, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Do not rely on the valid branch surviving; test syntax and use supported selectors or a safe fallback. For the design decision, add one near-miss that exposes assuming every selector list gets the forgiving behaviour of :is or :where. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming every selector list gets the forgiving behaviour of :is or :where.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for The selector list is unforgiving, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from The selector list is unforgiving?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming every selector list gets the forgiving behaviour of :is or :where be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA roster with eligible members are counted without removing ineligible entries. Include one ordinary case, one boundary and one deliberate failure caused by assuming every selector list gets the forgiving behaviour of :is or :where. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The of S grammar uses a complex-real-selector-list, so an invalid selector can invalidate the functional pseudo-class rather than being silently ignored. It shows a trace, not only a final value. The ordinary case should demonstrate “Do not rely on the valid branch surviving; test syntax and use supported selectors or a safe fallback.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for The selector list is unforgiving, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The selector list is unforgiving, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The grammar admits real element selectors rather than pseudo-elements such as ::before. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is trying to count generated boxes as DOM siblings. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Pseudo-elements are not candidates in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Pseudo-elements are not candidates in S chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on trying to count generated boxes as DOM siblings. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.item:nth-child(odd of .ready){color:green}Explained result. Count actual sibling elements; generated pseudo-elements do not form the filtered sibling list. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Predict the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The grammar admits real element selectors rather than pseudo-elements such as ::before.” Apply this procedure: State the contract for Pseudo-elements are not candidates in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Count actual sibling elements; generated pseudo-elements do not form the filtered sibling list. For the test laboratory, add one near-miss that exposes trying to count generated boxes as DOM siblings. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Contrast the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The grammar admits real element selectors rather than pseudo-elements such as ::before.” Apply this procedure: State the contract for Pseudo-elements are not candidates in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Count actual sibling elements; generated pseudo-elements do not form the filtered sibling list. For the design decision, add one near-miss that exposes trying to count generated boxes as DOM siblings. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework checklist. Stress-test the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The grammar admits real element selectors rather than pseudo-elements such as ::before.” Apply this procedure: State the contract for Pseudo-elements are not candidates in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Count actual sibling elements; generated pseudo-elements do not form the filtered sibling list. For the homework checklist, add one near-miss that exposes trying to count generated boxes as DOM siblings. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading table. Explain the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The grammar admits real element selectors rather than pseudo-elements such as ::before.” Apply this procedure: State the contract for Pseudo-elements are not candidates in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Count actual sibling elements; generated pseudo-elements do not form the filtered sibling list. For the reading table, add one near-miss that exposes trying to count generated boxes as DOM siblings. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers trying to count generated boxes as DOM siblings.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Pseudo-elements are not candidates in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from Pseudo-elements are not candidates in S?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing trying to count generated boxes as DOM siblings be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family planner with weekend cards form their own sequence among mixed days. Include one ordinary case, one boundary and one deliberate failure caused by trying to count generated boxes as DOM siblings. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The grammar admits real element selectors rather than pseudo-elements such as ::before. It shows a trace, not only a final value. The ordinary case should demonstrate “Count actual sibling elements; generated pseudo-elements do not form the filtered sibling list.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Pseudo-elements are not candidates in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Pseudo-elements are not candidates in S, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 17 OF 20 . Transfer with judgment
17. Dynamic state can change every later position
If a sibling begins or stops matching S, the filtered sequence is recomputed and later matches can shift. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is treating the initial stripe assignment as permanent. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Dynamic state can change every later position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Dynamic state can change every later position chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating the initial stripe assignment as permanent. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.row:nth-child(even of :not([hidden])){background:#eee}Explained result. Toggling hidden changes which visible rows are second, fourth and so on. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework checklist. Contrast the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “If a sibling begins or stops matching S, the filtered sequence is recomputed and later matches can shift.” Apply this procedure: State the contract for Dynamic state can change every later position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Toggling hidden changes which visible rows are second, fourth and so on. For the homework checklist, add one near-miss that exposes treating the initial stripe assignment as permanent. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading table. Stress-test the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “If a sibling begins or stops matching S, the filtered sequence is recomputed and later matches can shift.” Apply this procedure: State the contract for Dynamic state can change every later position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Toggling hidden changes which visible rows are second, fourth and so on. For the reading table, add one near-miss that exposes treating the initial stripe assignment as permanent. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science cards. Explain the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “If a sibling begins or stops matching S, the filtered sequence is recomputed and later matches can shift.” Apply this procedure: State the contract for Dynamic state can change every later position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Toggling hidden changes which visible rows are second, fourth and so on. For the science cards, add one near-miss that exposes treating the initial stripe assignment as permanent. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA roster. Transfer the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “If a sibling begins or stops matching S, the filtered sequence is recomputed and later matches can shift.” Apply this procedure: State the contract for Dynamic state can change every later position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Toggling hidden changes which visible rows are second, fourth and so on. For the CCA roster, add one near-miss that exposes treating the initial stripe assignment as permanent. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers treating the initial stripe assignment as permanent.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Dynamic state can change every later position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from Dynamic state can change every later position?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating the initial stripe assignment as permanent be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library catalogue with available titles are selected by filtered position. Include one ordinary case, one boundary and one deliberate failure caused by treating the initial stripe assignment as permanent. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: If a sibling begins or stops matching S, the filtered sequence is recomputed and later matches can shift. It shows a trace, not only a final value. The ordinary case should demonstrate “Toggling hidden changes which visible rows are second, fourth and so on.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Dynamic state can change every later position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Dynamic state can change every later position, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 18 OF 20 . Transfer with judgment
18. Combinators can make eligibility contextual
S may contain a complex real selector, so candidate eligibility can depend on relationships as well as a single class. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using complex filters without writing down which siblings actually qualify. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Combinators can make eligibility contextual, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Combinators can make eligibility contextual chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using complex filters without writing down which siblings actually qualify. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.item:nth-child(odd of .group > .item.active){outline:2px solid}Explained result. The author should enumerate matching sibling elements first, then apply the positional formula. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science cards. Stress-test the rule using only valid samples participate in a repeating three-card rhythm. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “S may contain a complex real selector, so candidate eligibility can depend on relationships as well as a single class.” Apply this procedure: State the contract for Combinators can make eligibility contextual, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The author should enumerate matching sibling elements first, then apply the positional formula. For the science cards, add one near-miss that exposes using complex filters without writing down which siblings actually qualify. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA roster. Explain the rule using eligible members are counted without removing ineligible entries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “S may contain a complex real selector, so candidate eligibility can depend on relationships as well as a single class.” Apply this procedure: State the contract for Combinators can make eligibility contextual, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The author should enumerate matching sibling elements first, then apply the positional formula. For the CCA roster, add one near-miss that exposes using complex filters without writing down which siblings actually qualify. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Transfer the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “S may contain a complex real selector, so candidate eligibility can depend on relationships as well as a single class.” Apply this procedure: State the contract for Combinators can make eligibility contextual, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The author should enumerate matching sibling elements first, then apply the positional formula. For the family planner, add one near-miss that exposes using complex filters without writing down which siblings actually qualify. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Predict the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “S may contain a complex real selector, so candidate eligibility can depend on relationships as well as a single class.” Apply this procedure: State the contract for Combinators can make eligibility contextual, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The author should enumerate matching sibling elements first, then apply the positional formula. For the library catalogue, add one near-miss that exposes using complex filters without writing down which siblings actually qualify. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using complex filters without writing down which siblings actually qualify.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Combinators can make eligibility contextual, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from Combinators can make eligibility contextual?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using complex filters without writing down which siblings actually qualify be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with odd, even, negative ranges, selector lists and invalid syntax expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by using complex filters without writing down which siblings actually qualify. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: S may contain a complex real selector, so candidate eligibility can depend on relationships as well as a single class. It shows a trace, not only a final value. The ordinary case should demonstrate “The author should enumerate matching sibling elements first, then apply the positional formula.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Combinators can make eligibility contextual, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Combinators can make eligibility contextual, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 19 OF 20 . Transfer with judgment
19. A support query can protect progressive enhancement
@supports selector(…) can gate the filtered form while a simpler baseline remains available. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is removing all useful styling in browsers that do not parse the new selector. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for A support query can protect progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the A support query can protect progressive enhancement chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on removing all useful styling in browsers that do not parse the new selector. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.row{border-bottom:1px solid #ddd}
@supports selector(:nth-child(2 of .x)){.row:nth-child(even of :not([hidden])){background:#eee}}Explained result. Every row keeps a baseline separator, and supporting browsers add filtered striping. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Explain the rule using weekend cards form their own sequence among mixed days. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports selector(…) can gate the filtered form while a simpler baseline remains available.” Apply this procedure: State the contract for A support query can protect progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every row keeps a baseline separator, and supporting browsers add filtered striping. For the family planner, add one near-miss that exposes removing all useful styling in browsers that do not parse the new selector. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Transfer the rule using available titles are selected by filtered position. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports selector(…) can gate the filtered form while a simpler baseline remains available.” Apply this procedure: State the contract for A support query can protect progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every row keeps a baseline separator, and supporting browsers add filtered striping. For the library catalogue, add one near-miss that exposes removing all useful styling in browsers that do not parse the new selector. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Predict the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports selector(…) can gate the filtered form while a simpler baseline remains available.” Apply this procedure: State the contract for A support query can protect progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every row keeps a baseline separator, and supporting browsers add filtered striping. For the test laboratory, add one near-miss that exposes removing all useful styling in browsers that do not parse the new selector. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Contrast the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “@supports selector(…) can gate the filtered form while a simpler baseline remains available.” Apply this procedure: State the contract for A support query can protect progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every row keeps a baseline separator, and supporting browsers add filtered striping. For the design decision, add one near-miss that exposes removing all useful styling in browsers that do not parse the new selector. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers removing all useful styling in browsers that do not parse the new selector.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for A support query can protect progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from A support query can protect progressive enhancement?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing removing all useful styling in browsers that do not parse the new selector be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with filtered nth-child is compared with classes, nth-of-type and DOM restructuring. Include one ordinary case, one boundary and one deliberate failure caused by removing all useful styling in browsers that do not parse the new selector. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: @supports selector(…) can gate the filtered form while a simpler baseline remains available. It shows a trace, not only a final value. The ordinary case should demonstrate “Every row keeps a baseline separator, and supporting browsers add filtered striping.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for A support query can protect progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For A support query can protect progressive enhancement, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 20 OF 20 . Transfer with judgment
20. Choose filtered counting only when eligibility precedes position
Use the of clause when a meaningful subset must be indexed; use a class when position is already computed by the application and keep selectors simple when no filtering job exists. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using a clever formula where a stable semantic class would communicate more clearly. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Choose filtered counting only when eligibility precedes position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.
For the Choose filtered counting only when eligibility precedes position chapter on CSS :nth-child(An+B of S), use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using a clever formula where a stable semantic class would communicate more clearly. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.result:nth-child(-n+3 of .qualified){font-weight:700}Explained result. The rule clearly selects the first three qualified sibling results, which is a genuine filtered-position job. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Transfer the rule using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use the of clause when a meaningful subset must be indexed; use a class when position is already computed by the application and keep selectors simple when no filtering job exists.” Apply this procedure: State the contract for Choose filtered counting only when eligibility precedes position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule clearly selects the first three qualified sibling results, which is a genuine filtered-position job. For the test laboratory, add one near-miss that exposes using a clever formula where a stable semantic class would communicate more clearly. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Predict the rule using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use the of clause when a meaningful subset must be indexed; use a class when position is already computed by the application and keep selectors simple when no filtering job exists.” Apply this procedure: State the contract for Choose filtered counting only when eligibility precedes position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule clearly selects the first three qualified sibling results, which is a genuine filtered-position job. For the design decision, add one near-miss that exposes using a clever formula where a stable semantic class would communicate more clearly. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework checklist. Contrast the rule using only incomplete tasks are counted before the first three are highlighted. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use the of clause when a meaningful subset must be indexed; use a class when position is already computed by the application and keep selectors simple when no filtering job exists.” Apply this procedure: State the contract for Choose filtered counting only when eligibility precedes position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule clearly selects the first three qualified sibling results, which is a genuine filtered-position job. For the homework checklist, add one near-miss that exposes using a clever formula where a stable semantic class would communicate more clearly. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading table. Stress-test the rule using visible rows retain zebra striping when hidden rows remain in the DOM. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use the of clause when a meaningful subset must be indexed; use a class when position is already computed by the application and keep selectors simple when no filtering job exists.” Apply this procedure: State the contract for Choose filtered counting only when eligibility precedes position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule clearly selects the first three qualified sibling results, which is a genuine filtered-position job. For the reading table, add one near-miss that exposes using a clever formula where a stable semantic class would communicate more clearly. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using a clever formula where a stable semantic class would communicate more clearly.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the contract for Choose filtered counting only when eligibility precedes position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS :nth-child(An+B of S) syntax. For this chapter, useful prompts are: “What did you expect from Choose filtered counting only when eligibility precedes position?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using a clever formula where a stable semantic class would communicate more clearly be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework checklist with only incomplete tasks are counted before the first three are highlighted. Include one ordinary case, one boundary and one deliberate failure caused by using a clever formula where a stable semantic class would communicate more clearly. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Use the of clause when a meaningful subset must be indexed; use a class when position is already computed by the application and keep selectors simple when no filtering job exists. It shows a trace, not only a final value. The ordinary case should demonstrate “The rule clearly selects the first three qualified sibling results, which is a genuine filtered-position job.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Choose filtered counting only when eligibility precedes position, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Choose filtered counting only when eligibility precedes position, separate the documented CSS :nth-child(An+B of S) mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
Parent guide: choose the next useful step
Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.
Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.
Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.
Capstone practice with explained routes
1. homework checklist: model, boundary and recovery
Create a small homework checklist using only incomplete tasks are counted before the first three are highlighted. Combine “An+B describes positions in a one-based sibling list” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The first candidate has index 1, and the formula selects positive indexes generated by An+B. Apply: State the contract for An+B describes positions in a one-based sibling list, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The first sibling item is selected by position 1. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
2. reading table: model, boundary and recovery
Create a small reading table using visible rows retain zebra striping when hidden rows remain in the DOM. Combine “Outside filtering has a different meaning” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: S:nth-child(An+B) counts all siblings first and then requires the subject to match S. Apply: State the contract for Outside filtering has a different meaning, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: Only important elements that are also among the first three siblings match; later important elements do not move forward. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
3. science cards: model, boundary and recovery
Create a small science cards using only valid samples participate in a repeating three-card rhythm. Combine “Minus n plus a number selects the first N candidates” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The pattern -n+3 generates the positive indexes 3, 2 and 1. Apply: State the contract for Minus n plus a number selects the first N candidates, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The first three eligible siblings are selected. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
4. CCA roster: model, boundary and recovery
Create a small CCA roster using eligible members are counted without removing ineligible entries. Combine “Hidden rows can be removed from the stripe count” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Filtering with :not([hidden]) lets visible rows alternate even when hidden rows remain as siblings. Apply: State the contract for Hidden rows can be removed from the stripe count, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The second, fourth and later non-hidden rows are striped. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
5. family planner: model, boundary and recovery
Create a small family planner using weekend cards form their own sequence among mixed days. Combine “Specificity includes the pseudo-class and the strongest selector in S” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The specificity of :nth-child(… of S) adds one pseudo-class plus the most specific complex selector in the list. Apply: State the contract for Specificity includes the pseudo-class and the strongest selector in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The ID branch can raise the rule specificity even for matches reached through another branch. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
6. library catalogue: model, boundary and recovery
Create a small library catalogue using available titles are selected by filtered position. Combine “Pseudo-elements are not candidates in S” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The grammar admits real element selectors rather than pseudo-elements such as ::before. Apply: State the contract for Pseudo-elements are not candidates in S, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: Count actual sibling elements; generated pseudo-elements do not form the filtered sibling list. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
7. test laboratory: model, boundary and recovery
Create a small test laboratory using odd, even, negative ranges, selector lists and invalid syntax expose boundaries. Combine “A support query can protect progressive enhancement” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: @supports selector(…) can gate the filtered form while a simpler baseline remains available. Apply: State the contract for A support query can protect progressive enhancement, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: Every row keeps a baseline separator, and supporting browsers add filtered striping. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
8. design decision: model, boundary and recovery
Create a small design decision using filtered nth-child is compared with classes, nth-of-type and DOM restructuring. Combine “odd and even are formula shorthands” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: odd represents 2n+1 and even represents 2n for positive candidate positions. Apply: State the contract for odd and even are formula shorthands, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The second, fourth and later even-positioned sibling rows receive the background. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
Frequently asked questions
How long should a practice session be?
Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.
Should every option or function be memorised?
No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.
What if the result is correct but the explanation is weak?
Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.
Is the shortest solution the best?
Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.
When should official documentation be used?
Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.
How can a parent help without technical expertise?
Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.
How do we test transfer?
Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.
What should be saved after practice?
Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.
Can these exercises replace backups?
No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.
What counts as mastery?
The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.
