|
| 1 | +--- |
| 2 | +title: Range selectors |
| 3 | +--- |
| 4 | + |
| 5 | +## Range selectors |
| 6 | + |
| 7 | +Content between two elements in a document can be selected using a range selector, regardless of their DOM position. When no unique wrapper element exists for the whole terms content and their is no easy way to select the content with only CSS selectors, range selectors can be utilized. The concept is inspired by the [Range API](https://developer.mozilla.org/en-US/docs/Web/API/Range), where content is defined by start and end points that may be inclusive or exclusive. The format is defined as a JSON object in the following way: |
| 8 | + |
| 9 | +```json |
| 10 | +{ |
| 11 | + "start[Before|After]": "CSS selector that marks where to begin capturing content", |
| 12 | + "end[Before|After]": "CSS selector that marks where to stop capturing content" |
| 13 | +} |
| 14 | +``` |
| 15 | + |
| 16 | +### Example |
| 17 | + |
| 18 | +Let's take an example to see when range selectors can be useful. Given the following HTML: |
| 19 | + |
| 20 | +```html |
| 21 | +<html> |
| 22 | + |
| 23 | +<body> |
| 24 | + <main> |
| 25 | + <!-- Breadcrumb Navigation --> |
| 26 | + <div> |
| 27 | + <ol> |
| 28 | + <li><a href="/">Home</a></li> |
| 29 | + <li><a href="/legal">Legal</a></li> |
| 30 | + <li>Terms and Conditions</li> |
| 31 | + </ol> |
| 32 | + </div> |
| 33 | + |
| 34 | + <!-- Sub Navigation --> |
| 35 | + <div> |
| 36 | + <nav> |
| 37 | + <ul> |
| 38 | + <li> |
| 39 | + <a href="/legal/terms">Terms and Conditions</a> |
| 40 | + </li> |
| 41 | + <li> |
| 42 | + <a href="/legal/privacy">Privacy Policy</a> |
| 43 | + </li> |
| 44 | + </ul> |
| 45 | + </nav> |
| 46 | + </div> |
| 47 | + |
| 48 | + <!-- Main Content --> |
| 49 | + <h1><a id="terms-title" href="#terms-title">Example Terms</a></h1> |
| 50 | + <p>Effective as of: January 1, 2024</p> |
| 51 | + |
| 52 | + <h2><a id="section-1" href="#section-1">1. Introduction</a></h2> |
| 53 | + <p>These are example terms and conditions.</p> |
| 54 | + |
| 55 | + <h2><a id="section-2" href="#section-2">2. Usage</a></h2> |
| 56 | + <p>Sample usage guidelines go here.</p> |
| 57 | + </main> |
| 58 | + |
| 59 | + |
| 60 | + <footer id="page-footer"> |
| 61 | + <nav> |
| 62 | + <div> |
| 63 | + <ul> |
| 64 | + <li><a href="/about">About</a></li> |
| 65 | + <li><a href="/contact">Contact</a></li> |
| 66 | + </ul> |
| 67 | + </div> |
| 68 | + </nav> |
| 69 | + </footer> |
| 70 | +</body> |
| 71 | + |
| 72 | +</html> |
| 73 | +``` |
| 74 | + |
| 75 | +In this case, there is no unique wrapper element for the terms content which is represented by all elements after the main title in the `main` element. Here selecting the whole `main` would result in selecting elements that are not part of the terms content, like the breadcrumb and sub navigation. The range selector can be used to select the terms content by specifying the main title `#terms-title` as the start point and the footer `#page-footer` as the end point. The selection starts *before* the main title, so it includes it, and ends *before* the footer, so it excludes it. |
| 76 | + |
| 77 | +So the resulting range selector is: |
| 78 | + |
| 79 | +```json |
| 80 | +{ |
| 81 | + "startBefore": "#terms-title", |
| 82 | + "endBefore": "#page-footer" |
| 83 | +} |
| 84 | +``` |
| 85 | + |
| 86 | +This range selector will select the terms content between the main title and the footer element. |
0 commit comments