search

bryanmcquade / scroll-to-css-selector

Explainer for supporting CSS selectors when navigating to a URL fragment
61 stars 1 forks source link

The :target pseudo-class #4

Open mathiasbynens opened 6 years ago

mathiasbynens commented 6 years ago

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 commented 6 years ago

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

BigBlueHat commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 5 years ago

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