Kombinatory

Kombinator w CSS to symbol używany do określenia relacji między dwoma elementami w dokumencie HTML i do zastosowania odpowiednich stylów do tych elementów. Dzięki kombinatorom można precyzyjnie określić, które elementy powinny być objęte stylami, co pozwala na bardziej złożone projektowanie stron internetowych.

Selektor Potomka

										
.container p {
  color: darkgreen;
}

To jest paragraf.

To jest inny paragraf.

Selektor potomka (spacja): Celuje w element, który jest potomkiem innego elementu. Przykład: .container p będzie działać na wszystkie paragrafy wewnątrz elementu o klasie "container".

Selektor Dziecka

										
 .container > p {
  font-weight: bold;
}

To jest paragraf.

To jest inny paragraf.

Selektor dziecka (">"): Celuje w element, który jest bezpośrednim potomkiem innego elementu. Przykład: .container > p będzie działać tylko na paragrafy, które są bezpośrednimi potomkami elementu o klasie "container".

Selektor Sąsiedniego Rodzeństwa

										
h2 + p {
  font-style: italic;
}

To jest nagłówek

To jest paragraf.

Selektor sąsiedniego rodzeństwa ("+"): Celuje w element, który jest następnym bratem innego elementu. Przykład: h2 + p będzie działać tylko na pierwszy paragraf zaraz po nagłówku h2.

Selektor Ogólny Rodzeństwa

										
h2 ~ p {
  background-color: #f3b6b6;
}

To jest nagłówek

To jest paragraf.

To jest jeszcze inny paragraf.

Selektor ogólny rodzeństwa ("~"): Celuje w element, który jest bratem innego elementu, niezależnie od tego, ile innych elementów jest między nimi. Przykład: h2 ~ p będzie działać na wszystkie paragrafy, które są bratami nagłówka h2.

Notatka

Te kombinatory w CSS pozwalają na bardziej precyzyjne określanie elementów, do których mają być stosowane style. Dzięki nim można tworzyć bardziej zaawansowane selektory i dostosowywać wygląd poszczególnych elementów na stronie.