<strong>Experimental:</strong> <strong>This is an <a href="/en-US/docs/MDN/Guidelines/Conventionsdefinitions#experimental">experimental technology</a></strong><br>Check the <a href="#browsercompatibility">Browser compatibility table</a> carefully before using this in production.

<pre class="brush: css notranslate"><code><span class="token comment">/ Selects a &lt;div&gt; when one of its descendants is a target /</span> <span class="token selector">div:target-within</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>

:target-within

Experimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The :target-within CSS pseudo-class represents an element that is a target element or contains an element that is a target. A target element is a unique element with an id matching the URL's fragment. In other words, it represents an element that is itself matched by the :target pseudo-class or has a descendant that is matched by :target. (This includes descendants in shadow trees.)

/* Selects a <div> when one of its descendants is a target */ div:target-within {   background: cyan; } 

Syntax

:target-within

Examples

Highlighting an article

The :target-within pseudo-class can be used to highlight the article if anything inside it has been directly linked to. The :target pseudo-class is also being used to show which item has been targeted.

<h3>Table of Contents</h3> <ol>  <li><a href="#p1">Jump to the first paragraph!</a></li>  <li><a href="#p2">Jump to the second paragraph!</a></li>  </ol>  <article>  <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!</p> <p id="p2">This is <i>another paragraph</i>, also accessible   from the links above. Isn't that delightful?</p> </article> 

article:target-within {   background-color: gold; }  /* Add a pseudo-element inside the target element */ p:target::before {   font: 70% sans-serif;   content: "►";   color: limegreen;   margin-right: .25em; }  /* Style italic elements within the target element */ p:target i {   color: red; } 

Specifications

See also