diff --git a/www/content/attributes/hx-indicator.md b/www/content/attributes/hx-indicator.md index d49060d7..e811ad78 100644 --- a/www/content/attributes/hx-indicator.md +++ b/www/content/attributes/hx-indicator.md @@ -7,7 +7,8 @@ added to it for the duration of the request. This can be used to show spinners o while the request is in flight. The value of this attribute is a CSS query selector of the element or elements to apply the class to, -or the keyword `closest`, followed by a CSS selector, which will find the closest matching parent (e.g. `closest tr`); +or the keyword [`closest`](https://developer.mozilla.org/docs/Web/API/Element/closest), followed by a CSS selector, +which will find the closest ancestor element or itself, that matches the given CSS selector (e.g. `closest tr`); Here is an example with a spinner adjacent to the button: diff --git a/www/content/attributes/hx-target.md b/www/content/attributes/hx-target.md index d6ba4a16..847bdd50 100644 --- a/www/content/attributes/hx-target.md +++ b/www/content/attributes/hx-target.md @@ -7,7 +7,8 @@ request. The value of this attribute can be: * A CSS query selector of the element to target. * `this` which indicates that the element that the `hx-target` attribute is on is the target. -* `closest ` which will find the closest parent ancestor that matches the given CSS selector +* `closest ` which will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest) + ancestor element or itself, that matches the given CSS selector (e.g. `closest tr` will target the closest table row to the element). * `find ` which will find the first child descendant element that matches the given CSS selector. * `next ` which will scan the DOM forward for the first element that matches the given CSS selector. diff --git a/www/content/attributes/hx-trigger.md b/www/content/attributes/hx-trigger.md index 9d0de546..595b85cc 100644 --- a/www/content/attributes/hx-trigger.md +++ b/www/content/attributes/hx-trigger.md @@ -58,7 +58,7 @@ is seen again before the delay completes it is ignored, the element will trigger * The extended CSS selector here allows for the following non-standard CSS values: * `document` - listen for events on the document * `window` - listen for events on the window - * `closest ` - finds the closest parent matching the given css selector + * `closest ` - finds the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest) ancestor element or itself, matching the given css selector * `find ` - finds the closest child matching the given css selector * `target:` - allows you to filter via a CSS selector on the target of the event. This can be useful when you want to listen for triggers from elements that might not be in the DOM at the point of initialization, by, for example, listening on the body, diff --git a/www/content/docs.md b/www/content/docs.md index a88102cb..d95b996b 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -392,7 +392,8 @@ input tag. `hx-target`, and most attributes that take a CSS selector, support an "extended" CSS syntax: * You can use the `this` keyword, which indicates that the element that the `hx-target` attribute is on is the target -* The `closest ` syntax will find the closest parent ancestor that matches the given CSS selector. +* The `closest ` syntax will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest) + ancestor element or itself, that matches the given CSS selector. (e.g. `closest tr` will target the closest table row to the element) * The `next ` syntax will find the next element in the DOM matching the given CSS selector. * The `previous ` syntax will find the previous element in the DOM the given CSS selector.