Zmiana takich samych elementów występujących bezpośrednio po elemencie.

0

Hej,
zastanawiam się czy jest możliwe aby z użyciem samego CSSa sprawić aby po najechaniu na jakiś element zmienić wszystkie takie same elementy występujące bezpośrednio po nim.
Przykład:

<div class="PIERWSZY"></div>
<div class="podrzedny"></div>     <---
<div class="podrzedny"></div>     <---
<div class="podrzedny"></div>     <---
<div class="DRUGI"></div>
<div class="podrzedny"></div>
<div class="podrzedny"></div>

Chodzi o to aby po najechaniu na PIERWSZY zmienić np kolor wszystkich elementów z klasą podrzędny występujących bezpośrednio po nim. (czyli tych, które zaznaczyłem).

Bardzo proszę o pomoc.

Wiem, że da się prościej ale ja muszę zrobić to akurat w ten sposób ;)

2

Jeśli możesz te pozycje, które chcesz sobie pokolorować wsadzić w dodatkowego DIV to damy radę :)
Rzuć okiem na http://jsfiddle.net/pjqzahxr/

<div class="a">Pozycja 1</div>
<div class="b">
<div>Pozycja 2</div>
<div>Pozycja 3</div>
<div>Pozycja 4</div>
</div>
.a:hover + .b {
   color: red;
}
2

Można użyć selektora brata:
.brat1 + .brat2
który zaznaczy ci jeden element brat2 występujący bezpośrednio za elementem klasy brat1.

Albo selektora rodzeństwa:
.brat ~ .bracia
który zaznaczy ci wszystkie elementy bracia występujące po elemencie brat wewnątrz tego samego kontenera.

Zatem powyższe da się zrobić po drobnych modyfikacjach:

DIV.nadrzedny:hover ~ DIV.podrzedny {
 background-color:red;
}
<div>
  <div class="nadrzedny PIERWSZY">1</div>
  <div class="podrzedny">1a</div>
  <div class="podrzedny">1a</div>
  <div class="podrzedny">1a</div>
</div>

<div>
  <div class="nadrzedny DRUGI">2</div>
  <div class="podrzedny">2a</div>
  <div class="podrzedny">2a</div>
</div>

1 użytkowników online, w tym zalogowanych: 0, gości: 1