Search code examples
htmlcsscss-selectorspseudo-class

:target to point to a .class and not to #id

is it a way to make the :target to point to a .class instead of a an #id so it can point for more than one element a use case:

<style>
section:target{height: 60px}
section p:target{color:red}
</style>

    <div class="menu">
    <nav><a href="#foo">Collapse me</a></nav>
    <nav><a href="#bar" >Change my color</a></nav>
        <section id="foo">
            <p id="bar">hop</p>
        </section>
</div>

<div class="menu">
    <nav><a href="#baz">Collapse me</a></nav>
    <nav><a href="#boo">Change my color</a></nav>
        <section id="baz">
        <p id="boo">la</p>
        </section>
    </div>

imagine that it will work, then you can make the famous "i'm here" in the menu, collapsing the page and showing where the user is at the same time, so imagine, you make a picture for example, then you put opacity:0 then when using target you let the value be opacity:1

Solution

  • It's not possible, plus it's not how the :target pseudo-class is meant to be used.

    Anchor fragments in URLs can only ever point to one identifier at a time, so even if :target did look at classes, you wouldn't be able to apply styles to more than one element of a given class at a time. This is why anchor fragments are made to correspond to IDs, not classes.

    If you need to target more than one element you should be using other CSS selectors or even JavaScript.