Target multiple id's with :target?

Question

Currently i use <a href="id1"></a> with CSS :target to target the specific tag. Is it possible to target multiple tags at the same time? So that #id1 and id2 would be in target at the same time, eexample. ..index.html#id1#id2 (or something like this?)

Answer 1

You can use the :target selector to stylize multiple elements when you combine it with either a tag style or a class style.

Like this on JSFiddle:

HTML
<p><a href="#targetLink">Jump to New content 1</a></p>

<div id="targetLink">
    <p>New content 1...</p>
    <p>New content 2...</p>
</div>

CSS
:target p
{
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

Make a div or span your id target then use the target selector in combination with an element. The effect is that all <p> inside of the element with id="targetLink" will be given the style.

Get more control with classes like this JSFiddle:

HTML
<p><a href="#targetLink">Jump to New content 1</a></p>

<div id="targetLink">
    <p class="here">New content 1...</p>
    <p class="here">New content 2...</p>
    <p>New content 3...</p>
</div>

CSS
:target .here
{
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

Again, make a div or span your id target then use the target selector in combination with a a class. The effect is that all all elements with class="here" inside of the element with id="targetLink" will be given the style.

---

Here is a neat tutorial to get a yellow fade using this technique.