Использование селектора: target для воздействия на не связанный DIV (без Javascript)?

Question

Можно ли использовать CSS-селектор :target, чтобы повлиять на другой DIV?Например, когда пользователь посещает http://website.com/#button, можете ли вы оформить элемент .photo, если элементы были структурированы, как показано ниже?

<div class="gallery">
  <ul>
   <li class="photo">
   <li class="photo">
  </ul>
<div>
<div id="button">Button Text</div>

Answer 1

:target проверяет хэш-часть URL-адреса и ищет совпадения id для элемента.Так что да, вы можете влиять на другой элемент, но ему нужен id, который соответствует текущей части хеша.Вот пример http://jsfiddle.net/Tetaxa/egF3d/

Answer 2

Вы можете воздействовать на несколько элементов, но все они должны быть связаны с элементом, который является целью. Самый простой способ сделать это - поместить id в элемент оболочки:

<div id="gallery1">
    <div class="gallery">
      <ul>
          <li class="photo">Photo</li>
          <li class="photo">Photo</li>
      </ul>
    </div>
</div>
<div id="gallery2">
    <div class="gallery">
      <ul>
          <li class="photo">Photo</li>
          <li class="photo">Photo</li>
      </ul>
    </div>
</div>
<a href="#gallery1">Gallery 1</a>|<a href="#gallery2">Gallery 2</a>

Тогда у вас могут быть такие правила:

.gallery {
    //rules for when gallery is not the target
}
:target .gallery {
    //rules for when the gallery is the target
}

Вот пример .