diff --git a/files/en-us/web/css/_colon_target/index.md b/files/en-us/web/css/_colon_target/index.md index 47df3c8c731c95b..b967f960182e793 100644 --- a/files/en-us/web/css/_colon_target/index.md +++ b/files/en-us/web/css/_colon_target/index.md @@ -12,7 +12,7 @@ browser-compat: css.selectors.target --- {{CSSRef}} -The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents a unique element (the _target element_) with an {{htmlattrxref("id")}} matching the URL's fragment. +The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents a unique element (the _target element_) with an {{htmlattrxref("id")}} matching the URL's fragment at the time the page loaded. ```css /* Selects an element with an ID matching the current URL's fragment */ @@ -35,6 +35,14 @@ The following element would be selected by a `:target` selector when the current {{csssyntax}} +## Caveats + +There are two caveats that make the `:target` selector unsuitable for use with dynamic content. + +1. The target element is determined at the time of `DOMContentLoad`, upon navigations triggered by clicking on links, and when setting `window.location` or `window.location.hash`. It does NOT update when changing the location hash via `window.history.pushState()` or `window.history.replaceState()`. Pages relying on `history` to navigate cannot rely on `:target` to highlight content. + +2. Because the target element has already been determined on `DOMContentLoaded`, the `:target` selector does not select a matching element added to the DOM at some time after `DOMContentLoaded`. + ## Examples ### A table of contents