CODEWITHSUNDEEP
csscss-selectors
Maciej Jankowski
Maciej Jankowski

Reputation: 2824

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

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>

Upvotes: 4

Views: 121

Answers (2)

Mohsen Safari
Mohsen Safari

Reputation: 6795

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>

Upvotes: 2

BoltClock
BoltClock

Reputation: 723678

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.

Upvotes: 4

Related Questions