CSS selector when :target empty

前端 未结 4 1693
我寻月下人不归
我寻月下人不归 2020-12-11 04:03

I need a css3 selector to target an element when the :target equals the id of the element (easy) or when the :target is empty (impossible?). It

4条回答
  •  被撕碎了的回忆
    2020-12-11 04:26

    Sigh. I feel like I'm resurrecting a dead topic, but it needs a real answer.

    It's possible to do this with CSS alone, just by using :last-child and a general sibling combinator, in the form of :target ~ :last-child:

    .pages > .page:target ~ .page:last-child,
    .pages > .page {
        display: none;
    }
    
    /* :last-child works, but .page:last-child will not */
    .pages > :last-child,
    .pages > .page:target {
        display: block;
    }
    

    The rules applies in the following steps:

    1. hide all pages
    2. show both targeted page and the last page
    3. if a page is targeted, hide the last page (.page:target ~ .page:last-child)

    (live example)

    Edit: Apparently this is very similar to the accepted answer in an older, previously mentioned, related post.

提交回复
热议问题