The :target pseudo-class

[mathiasbynens]

In CSS, the :target pseudo-class can be used to style the currently-targeted element, i.e. the element with an id matching the URL fragment.

Do we want to extend :target to support these targetElements?

[jakearchibald]

If there are multiple matches, I assume the first is used (like querySelector), so :target should only target the first match.

[BigBlueHat]

Here's a JSBin (though with out using any JS 😉) that shows the use of :target and shows that what @jakearchibald highlights is correct (it's essentially the same as querySelector; i.e. first match "wins"): https://jsbin.com/rekalan/edit?html,output

[mathiasbynens]

If there are multiple matches, I assume the first is used (like querySelector)

Your assumption is correct — this is mentioned in the README here. :target so far has only ever applied to a single element at a time, so this wouldn’t change.

[mathiasbynens]

@BigBlueHat I think Jake was talking about this proposal matching only one element at a time when he voiced his assumption. For :target this is already the way it works indeed.

[BigBlueHat]

So...

.content :target { display: block }

#targetElement=ul>li

Would actually match:

.content ul > li:firt-child

This is another reason direct mapping to #querySelector and/or #querySelectorAll would help clarify things.

[laukstein]

Here https://github.com/bokand/ScrollToTextFragment/issues/1 I propose :target-within for Scroll-To-Text.