Sometimes we may need to provide a path to a specific section on a web page using multiple different #-tail URLs, and for this task, as far as I know, we have to use multiple blank <a> elements. Here is an example:
<p><a href="#sun">Lorem</a> ipsum.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem <a href="#yellow">ipsum</a> dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <a href="#hot">sit</a> amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<a id="yellow"></a>
<a id="hot"></a>
<h1 id="sun">Sun</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
After the "jump" (that is, after the user have clicked one of the hyperlinks), I would prefer to highlight the <h1> element Sun using the :target pseudo-class.
But how to make it work not only for href="sun", but also for href="hot" and href="yellow"?
/* works for href="sun" */
:target { outline: 1px solid red; }
/* my attempt to make it work for href="hot". Doesn't work.
And there is still a question how to make it work for href="yellow" */
:target + h1 { outline: 1px solid red; }
Using general sibling selector :target ~ h1 :
:target:not(a) {
outline: 1px solid red;
}
:target ~ h1 {
outline: 1px solid red;
}<p><a href="#sun">Lorem</a> ipsum.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem <a href="#yellow">ipsum</a> dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <a href="#hot">sit</a> amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<a id="yellow"></a>
<a id="hot"></a>
<h1 id="sun">Sun</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>