Przejdź do treści

Selektory elementów

Ogólny selektor braci

(CSS 3 - interpretuje Internet Explorer 7.0, Firefox, Opera, Chrome)

brat1 ~ brat2 { cecha: wartość }
gdzie wyrazy "brat1" oraz "brat2" są selektorami typu, przy czym leżą one w tym samym rzędzie hierarchii drzewa dokumentu [zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach.

Selektor ten umożliwia nadanie określonych atrybutów wszystkim braciom - tym, których typ w deklaracji został podany jako drugi (czyli brat2). Zwykły tekst znajdujący się pomiędzy braćmi nie ma wpływu na działanie selektora, tzn. jest ignorowany. W odróżnieniu jednak od podstawowego selektora braci, w tym przypadku pomiędzy braćmi mogą się znajdować również elementy innego typu - zostaną pominięte.

Nie obsługuje MSIE 6.0!.

Przykład:

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:
i ~ b { color: red }
Dzięki temu, jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się znaczniki i oraz b, to te drugie uzyskają określone atrybuty:

To jest akapit, wewnątrz którego znajduje się: pochylenie (nie powinno być czerwone), dalekopis (nie powinien być czerwony) oraz pogrubienie (powinno być czerwone)... następne pogrubienie (powinno być czerwone). A to jest pogrubienie (nie powinno być czerwone) wewnąrz pochylenia (nie powinno być czerwone). Tutaj kończy się akapit.

Zwróć uwagę, że pomiędzy braćmi, oprócz zwykłego tekstu, znajduje się dodatkowo znacznik dalekopisu (tt) i mimo to nie zaburza on działania selektora, gdyż jest innego typu niż bracia wyszczególnieni w regule stylów. Ponadto warto zauważyć, że inaczej niż dla podstawowego selektora braci, w tym przypadku formatowanie otrzymują również wszystkie następne znaczniki typu brat2, a nie tylko pierwszy z nich. Właśnie dlatego w powyższym przykładzie drugie pogrubienie również jest czerwone.

Komentarze

Zobacz więcej komentarzy