Bardziej zaawansowane selektory i łańcuchy

We wcześniejszej części omówione zostały selektory typu, klas i id, teraz poznamy kilka następnych i nauczymy się je wszystkie łączyć w łańcuchy.

Selektor potomka

div#blok1 strong {
    font-weight: bold;
}

Spacja pomiędzy selektorami typów div a strong to właśnie selektor potomka. W praktyce oznacza to, że tekst zawarty, w każdym znaczniku strong znajdującym się wewnątrz bloku div o identyfikatorze blok1.

Warto zauwazyć, że selektory zastosowane w powyższym przykładzie są już najprostszą fomą łańcucha, który może być dowolnej długości i łączyć w sobie wszystkie poznane wcześniej selektory.

Selektor dziecka

div#blok1>strong {
    font-weight: bold;
}

Selektor dziecka > różni się od selektora potomka większą precyzją ponieważ wskazuje jedynie na te elementy strong, które znajdują się bezpośrednio wewnątrz naszego elementu blokowego. Jeżeli w dokumencie HTML wskazany element zostanie “otoczony” znacznikami p nie zostanie pogrubiony, ponieważ jego pozycja w drzewie DOM zmieni się o jeden poziom względem rodzica.

Łańcuchy

div#blok1 p.cytat>strong> {
    font-weight: bold;
}

W tym przypadku pogrubione zostaną fragmenty tekstu wyszczególnione tagami strong ale tylko jeżeli zostaną bezpośrednio zagnieżdżone wewnątrz znaczników p o klasie cytat. Te z koleji mogą znajdować się dowolną liczbę poziomów w głąb od znacznika div o id blok1.

Dodatkowe selektory

Te selektory stosuje się dość żadko jednak są sytuacje, w których mogą się orzydać i warto o nich wiedzieć.

Selektor atrybutu

[title] {
    border: 1px solid black;
}

Wszystkie elementy HTML posiadające atrybut tittle zostaną otoczone cienką ramką.

Selektor atrybutu i wartości

[title=Expose] {
    border: 1px solid black;
}

W tym przypadku ograniczymy się do elementów z atrybutem title o wartości Expose.

[title~=Expose] {
    border: 1px solid black;
}

A teraz nieco rozluźnimy zasady i wystarczy nam, że w tytule będzie zawarta nazwa Expose.