Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(css): update :target page #37584

Merged
merged 3 commits into from
Jan 24, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 15 additions & 9 deletions files/en-us/web/css/_colon_target/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,25 @@ 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 [`id`](/en-US/docs/Web/HTML/Global_attributes/id) matching the URL's fragment.
The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the _target element of the document_. When the document is loaded, the target element is derived using the document's [URL fragment identifier](/en-US/docs/Web/URI/Fragment#fragment).

```css
/* Selects an element with an ID matching the current URL's fragment */
/* Selects document's target element */
:target {
border: 2px solid black;
}
```

For example, the following URL has a fragment (denoted by the _#_ sign) that points to an element called `section2`:
For example, the following URL has a fragment identifier (denoted by the _#_ sign) that marks the element with the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of `setup` as the document's target element:

```url
http://www.example.com/index.html#section2
http://www.example.com/help/#setup
```

The following element would be selected by a `:target` selector when the current URL is equal to the above:

```html
<section id="section2">Example</section>
<section id="setup">Installation instructions</section>
```

## Syntax
Expand All @@ -36,6 +36,12 @@ The following element would be selected by a `:target` selector when the current
}
```

## Description

When an HTML document loads, the browser sets its target element. The element is identified using the URL fragment identifier. Without the URL fragment identifier, the document has no target element. The `:target` pseudo-class allows styling the document's target element. The element could be focused, highlighted, animated, etc.

The target element is set at document load and [`history.back()`](/en-US/docs/Web/API/History/back), [`history.forward()`](/en-US/docs/Web/API/History/forward), and [`history.go()`](/en-US/docs/Web/API/History/forward) method calls. But it is _not_ changed when [`history.pushState()`](/en-US/docs/Web/API/History/pushState) and [`history.replaceState()`](/en-US/docs/Web/API/History/replaceState) methods are called.

> [!NOTE]
> Due to [a possible bug in the CSS specification](https://discourse.wicg.io/t/target-css-does-not-work-because-shadowroot-does-not-set-a-target-element/2070/), `:target` doesn't work within a [web component](/en-US/docs/Web/API/Web_components) because the [shadow root](/en-US/docs/Web/API/ShadowRoot) doesn't pass the target element down to the shadow tree.

Expand All @@ -61,12 +67,12 @@ The `:target` pseudo-class can be used to highlight the portion of a page that h

<h3>My Fun Article</h3>
<p id="p1">
You can target <i>this paragraph</i> using a URL fragment. Click on the link
above to try out!
You can target <i>this paragraph</i> using a URL fragment. Click on the first
link above to try out!
</p>
<p id="p2">
This is <i>another paragraph</i>, also accessible from the links above. Isn't
that delightful?
This is <i>another paragraph</i>, also accessible from the second link above.
Isn't that delightful?
</p>
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ page-type: guide

{{CSSRef}}

When a URL points at a specific piece of a document, it can be difficult for the user to notice. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.
When a URL points at a specific piece of a document using a [URL fragment identifier](/en-US/docs/Web/URI/Fragment#fragment), it can be difficult for the user to notice. This guide discusses using CSS to draw attention to the target of a URL to improve user experience.

## Picking a Target

The [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}} is used to style the target element of a URL containing a fragment identifier. For example, the URL `https://developer.mozilla.org/en-US/docs/Web/CSS#reference` contains the fragment identifier `#reference`. In HTML, identifiers are found as the values of either `id` or `name` attributes, since the two share the same namespace. Thus, the example URL would point to the heading "reference" in that document.
The [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}} is used to style the target element of the document identified using the URL fragment identifier. For example, the URL `https://developer.mozilla.org/en-US/docs/Web/CSS#reference` contains the fragment identifier `#reference`. In HTML, identifiers are found as the values of either `id` or `name` attributes, since the two share the same namespace. Thus, the example URL would point to the element that has the id `reference` in that document.

Suppose you wish to style any `h2` element that is the target of a URL, but do not want any other kind of element to get a target style. This is simple enough:

Expand Down
Loading