|
| 1 | +# Rules of Selectors |
| 2 | + |
| 3 | + |
| 4 | +## Shared keywords for pseudo selectors and property value |
| 5 | +- active |
| 6 | +- paused |
| 7 | +- open |
| 8 | +- disabled |
| 9 | +- default |
| 10 | +- optional |
| 11 | + |
| 12 | +## May Include |
| 13 | + |
| 14 | +- & (nesting selector) |
| 15 | +- selector[] (attribute selector) |
| 16 | +- .selector (class selector) |
| 17 | +- #selector (id selector) |
| 18 | +- keyword (type selector) ... can be namespaced ns|h1 or |h1 ... aka elemental selector or tag name |
| 19 | +- - (universal selector) |
| 20 | + |
| 21 | +- selector.class |
| 22 | +- selector#id |
| 23 | + |
| 24 | +## Patterns |
| 25 | + |
| 26 | +- - |
| 27 | +- E |
| 28 | +- E:(not|is|where|has)() |
| 29 | +- E.class |
| 30 | +- E#id |
| 31 | +- E[attr] |
| 32 | +- E:dir() - Directional pseudo-class |
| 33 | +- E:lang() - Language pseudo-class |
| 34 | +- E:(any-link|link|visited|local-link|target|target-within|scope) - Location pseudo-class |
| 35 | +- E:(active|hover|focus|focus-within|focus-visible) - User Action Pseudo-classes |
| 36 | +- E:(current|current()|past|future) - Time-dimensional Pseudo-classes |
| 37 | + |
| 38 | +### Resource State Pseudo-classes |
| 39 | + |
| 40 | +- E:(playing|paused|seeking) - Media Playback State |
| 41 | +- E:(buffering|stalled) - Media Loading State |
| 42 | +- E:(muted|volume-locked) - Sound States |
| 43 | + |
| 44 | +- E:(open|popover-open|modal|fullscreen|picture-in-picture) - Element Display State Pseudo-classes |
| 45 | + |
| 46 | +- E:(enabled|disabled|read-write|read-only|placeholder-shown|autofill|default|checked|indeterminate|valid|invalid|in-range|out-of-range|required|optional|blank|user-valid|user-invalid) |
| 47 | + |
| 48 | +- E:(root|empty|nth-child()|nth-last-child()|first-child|last-child|only-child|nth-of-type()|nth-last-of-type()|first-of-type|last-of-type|only-of-type) - Tree-Structural pseudo-classes |
| 49 | + |
| 50 | +### Grid-Structural Selectors |
| 51 | + |
| 52 | +- E F | E > F | E + F | E ~ F ... combinator (>|+|~|\\s) |
| 53 | +- F || E | E:(nth-col()|nth-last-col()) - Grid-Structural Selectors |
| 54 | + |
| 55 | +## Complex Selectors |
| 56 | + |
| 57 | +selector.class |
| 58 | +selector#id |
| 59 | +selector{combinator} |
| 60 | +selector:pseudo-class |
| 61 | +selector::pseudo-element |
| 62 | + |
| 63 | +## 5 Aspects |
| 64 | + |
| 65 | +1. tag name |
| 66 | +2. namespace |
| 67 | +3. ID |
| 68 | +4. Class |
| 69 | +5. Attribute (name-value pairs) |
| 70 | + |
| 71 | +### May start or end with |
| 72 | + |
| 73 | +\*|\\||\\#|\\.|combinator|,|& |
| 74 | + |
| 75 | +### May start with |
| 76 | + |
| 77 | +### May end with |
| 78 | + |
| 79 | +:[\\w]+ | ::[\\w]+ | [] |
| 80 | + |
| 81 | +May NOT start with |
| 82 | +digit |
| 83 | + |
| 84 | +May NOT end with |
| 85 | +:\\s+ |
| 86 | + |
| 87 | +- Universal selector \* |
| 88 | +- Nesting selector & |
| 89 | +- Namespace selector | |
| 90 | +- Class selector . |
| 91 | +- Id selector # |
| 92 | +- Whitespace \\s |
| 93 | +- Combinator ~|+|> |
| 94 | +- Comma , |
| 95 | +- Closing bracket }|)|] |
| 96 | +- Semicolon ; |
| 97 | +- colon without whitespace :[^\\s] |
| 98 | +- comment block \*/ |
0 commit comments