A vocabulary for shaping interfaces with AI https://icontemp.com/wiki/cssprimer/ 2026-07-23T23:00:42+00:00 https://icontemp.com/wiki/cssprimer/ https://icontemp.com/wiki/cssprimer/lib/exe/fetch.php?media=wiki:logo.png text/html 2026-05-20T14:16:56+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_attribute_selectors_for_the_ai_era&rev=1779286616&do=diff 04. Attribute Selectors — Targeting Elements by Their Properties —Part of CSS Primer for the AI Era — Selectors Attribute selectors let us target elements based on the attributes they carry — things like href, type, alt, data-*, and more. text/html 2026-05-20T14:17:52+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_basic_selectors_for_the_ai_era&rev=1779286672&do=diff 02. Basic Selectors — Elements, Classes, and IDs —Part of CSS Primer for the AI Era — Selectors Basic selectors are the foundation of all CSS. They are the simplest way to point at elements in the document, and they form the vocabulary we use when guiding AI text/html 2026-05-20T14:17:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_combinators_for_the_ai_era&rev=1779286641&do=diff 03. Combinators — Describing Relationships Between Elements —Part of CSS Primer for the AI Era — Selectors Combinators let us describe how elements relate to each other in the DOM. They are the grammar that connects one selector to another. text/html 2026-05-20T14:14:52+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_combining_pseudo_classes_and_elements&rev=1779286492&do=diff 08. Combining Pseudo‑classes and Pseudo‑elements Pseudo‑classes and pseudo‑elements complement each other. A pseudo‑class tells us when an element is in a particular condition. A pseudo‑element tells us which part of the element we want to style. text/html 2026-05-20T14:15:57+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_pseudo_elements_for_the_ai_era&rev=1779286557&do=diff 06. Pseudo‑elements — Styling Parts of an Element Pseudo‑elements let us style pieces of an element — fragments that do not exist as separate nodes in the DOM. They give us a way to reach inside an element and work with its internal structure, without adding extra markup. text/html 2026-05-20T14:15:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_pseudo_elements_practice_for_the_ai_era&rev=1779286520&do=diff 07. Pseudo‑elements in Practice (Simple Examples) Pseudo‑elements are most helpful when we use them with intention and restraint. Here are a few quiet, real‑world patterns that show how they help us shape content and decoration without adding extra markup. text/html 2026-05-20T14:14:10+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_selectors_accessibility_content_limitations&rev=1779286450&do=diff 09. Accessibility Notes for content: Pseudo‑elements let us add small pieces of decoration without changing the HTML. But because the content lives outside the DOM, assistive technologies may not treat it as real text. Screen readers, braille displays, and other tools often ignore pseudo‑element content entirely. text/html 2026-05-20T14:18:16+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_selectors_for_the_ai_era&rev=1779286696&do=diff 01. Selectors — How We Point to What We Mean —Part of CSS Primer for the AI Era — Selectors Selectors are the language we use to point at elements in the document. If HTML expresses meaning, and CSS expresses appearance, → selectors are the text/html 2026-05-20T14:11:44+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_selectors_summary_and_limitations&rev=1779286304&do=diff 11. Selectors — A Summary of What They Can and Cannot Do —Part of CSS Primer for the AI Era — Selectors CSS selectors are powerful, but they are not universal. They can move down the DOM tree and forward through siblings — but they cannot move up, backward, or sideways in certain ways. text/html 2026-05-20T14:16:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_state_selectors_for_the_ai_era&rev=1779286591&do=diff 05. State Selectors — Targeting Elements by Their Conditions —Part of CSS Primer for the AI Era — Selectors State selectors let us target elements based on their current condition — whether they are hovered, focused, checked, active, text/html 2026-05-20T14:13:34+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:css_when_not_to_use_pseudo_elements&rev=1779286414&do=diff 10. When Pseudo‑elements Should Not Be Used Pseudo‑elements are powerful, but they are not a replacement for real HTML. Because they live outside the DOM and are often ignored by assistive technologies, we use them with intention and restraint. text/html 2026-05-20T14:19:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=selectors:start&rev=1779286754&do=diff Selectors “Selectors” as a topic comes after “Foudations”. Here is where the Primer shifts from the abstract architecture of CSS to the hands‑on vocabulary people need to steer AI with confidence. This is where we feel that “I can actually do this” moment.