How do I write a :target selector for more than just the id

Question

Is there a combination of selectors that would allow me to access the thumbnail list following the :target selected image1?

p.s. if that would help thumbnail list could be moved into gallery list as a last element... Then maybe I could somehow use ~ selector?

<div id="gallery-list">

    <div>
      <div id="thumbnail"> <a href="#image1"><img src="image1_thumb.png"></a> </div>
      <div id="image1" class="overlay"><img src="image1.png"></div>
    </div>

    <div id="I_WANT_TO_SHOW_THIS_ALONG_WITH_image1_OVERLAY" class="thumbnail-list">
        <img src="image1_thumb_mini.png">
    </div>

</div>

I have a little bit hard time understanding what your meaning, perhaps show your current selector to make it a little bit easier to get ur point. if i had to make a guess i'd say your want to do `:target #thumbnail-list` — Breezer, Nov 03 '13 at 07:40
this is not possible with only CSS, you can do it with jQuery. there is no backward in CSS, you need to move `thumbnail-list` to be sibling — Mohsen Safari, Nov 03 '13 at 07:49
@Breezer what I'm asking - is there a way to access thumbnail list with :target? — Maciej Jankowski, Nov 03 '13 at 07:51

score 4 · Accepted Answer · edited May 23 '17 at 12:21

4

p.s. if that would help thumbnail list could be moved into gallery list as a last element... Then maybe I could somehow use ~ selector?

Like as a sibling of #image1? If so, yes that will work. The selector you would use would then be #image1:target ~ .thumbnail-list. Either remove that parent div that doesn't have a class, or move .thumbnail-list into that div if it needs to be there.

But with your current structure, it's not possible because .thumbnail-list is a sibling of the parent of #image1, and there is no parent selector.

edited May 23 '17 at 12:21

Community

1
1

answered Nov 03 '13 at 07:49

BoltClock

630,065
150
1,295
1,284

I already learned there is no parent :) And I'm not that much attached to the structure - so that's why I was thinking that `~` could help! I'll try it out~! Thanks! – Maciej Jankowski Nov 03 '13 at 07:53

score 2 · Answer 2 · answered Nov 03 '13 at 07:54

you can use this selector #image1:target ~ .thumbnail-list, if you change your HTML like this:

<div id="gallery-list">
    <div>
      <div id="thumbnail"> 
           <a href="#image1"><img src="image1_thumb.png"></a> 
      </div>

      <div id="image1" class="overlay">
           <img src="image1.png">
      </div>

      <div id="I_WANT_TO_SHOW_THIS_ALONG_WITH_image1_OVERLAY" class="thumbnail-list">
        <img src="image1_thumb_mini.png">
      </div>

    </div>
</div>

How do I write a :target selector for more than just the id

2 Answers2