Wpływanie na elementy znajdujące się obok siebie (siostrzane) [CSS]

Czas czytania: 2 minut

Dzisiaj pokażę wam jak w bardzo prosty sposób możemy powiązać ze sobą elementy, elementy siostrzane. Czyli takie, które znajdują się obok siebie (mają wspólnego rodzica) i nie są w żaden inny sposób ze sobą powiazane. W większości przypadków kiedy oddziałujemy na dane obiekt są one ze sobą fizycznie powiązane.

Standardowe oddziaływanie na elementy w CSS

Przykładowo element <a> zazwyczaj znajduje się jakimś paragrafie <p> lub <div>. Chcąc go spersonalizować zmieniając odwołamy się więc do rodzica czyli naszego <p> lub <div>.

Na takiej zasadzie zależności obrabiany na stronie jest praktycznie każdy element. Przynajmniej tak to działa „normalnie” w CSS.

A do manipulacji pomiędzy niezależnymi elementami wykorzystuje się JavaScript i inne jego biblioteki. Jednak tak być  nie musi. Obecnie spokojnie niektóre operacje możemy wykonywać z pomocą CSS.

Oczywiście nie są to tak skomplikowane operacje jak w JS, ale efekty i tak mogą być wystarczające. A zatem od czego zacząć!

Manipulowanie rodzeństwem

Na początek odsyłam was do wpisu na temat rodzeństwa – czyli elementów znajdujących się na tym samym poziomie. Szczególnie zwróćcie uwagę na „~” (tyldę). Ten znaczek umożliwia nam manipulowanie obiektami znajdującymi po konkretnym obiekcie np:

See the Pen siblings by Aura (@Julka85) on CodePen.dark

Jak widać na załączonym przykładzie <span> znajdujące się za H4. W przykładzie bardzo istotne by elementy muszą być na tym samym poziomie.

Zmiana wyglądu z pomocą radio button

Naszą zabawę zaczniemy od efektu z wykorzystaniem radio button. Zakładam, że każdy z was wie co to jest i jak wygląda radio button:

<input type="radio" value="..." name="..." id="..." />

oraz element label – etykieta

<label for="...">...</label>

Jak będziecie budować cokolwiek z wykorzystaniem tego pola pamiętajcie, że

  • name – musi być takie same dla całej grupy
  • id – może być różne
  • for odnosi się do id <input> (podobnie jak w likach – kotwice, odnośniki)

np:

See the Pen radio by Aura (@Julka85) on CodePen.dark

Jak widać nie musimy klikać w sam radio box wystarczy nam kliknąć w samą etykietę. Oznacza to, że spokojnie możemy ukryć element radio i zostawić samą etykietę.

Zwykłe display:none powinno załatwić sprawę. Pamiętajcie, że ukrywamy tylko 1 typ elementu:

input[type=radio]{
  display: none;
}

Od tej chwili element radio będzie się zaznaczał, ale nie będzie dla nas widoczny. Przeglądarka interpretując kod CSS ukryje go przed nami.

Następnym korkiem będzie stworzenie elementów, które chcemy zmieniać po kliknięciu w „etykietę”. Przykładowo może to być <div>.  W celu lepszego rozróżnienia <div> powinien otrzymać unikatowe id.

input#one-one:checked ~ #target-1

Oczywiście mamy 3 opcje więc elementów też tyle będziemy mieć:

See the Pen Check target by Aura (@Julka85) on CodePen.dark

źródła:
https://justcss.co.za/css/the-infamous-radio-button-hack/