[HTML|CSS] Poznaj selektory, pseudoklasy i pseudoelementy

Selektory CSS są nieodzownym narzędziem w stylizacji stron internetowych. Pozwalają nam precyzyjnie wybierać i stylizować elementy na stronie. Wraz z pojawieniem się nowych wersji CSS, pojawiają się również coraz bardziej zaawansowane selektory, które dają nam jeszcze większą kontrolę nad naszymi stylami. W tym artykule przedstawimy kilka zaawansowanych selektorów CSS, które warto poznać i wykorzystać.

Selektory atrybutów

Selektory atrybutów pozwalają nam wybrać elementy na podstawie ich atrybutów. Na przykład, możemy wybrać wszystkie linki, które mają atrybut "target" ustawiony na "_blank" za pomocą selektora [target="_blank"]. Możemy również wykorzystać selektory atrybutów do stylizacji elementów na podstawie ich wartości, np. [href^="https://"] wybierze wszystkie linki, które zaczynają się od "https://".

Selektory potomne

Selektory potomne pozwalają nam wybrać elementy, które są potomkami określonego elementu. Na przykład, możemy wybrać wszystkie paragrafy wewnątrz diva o klasie "container" za pomocą selektora .container p. Możemy również korzystać z selektorów potomnych, aby wybrać elementy, które są potomkami danego elementu, ale znajdują się bezpośrednio pod nim, np. .container > p wybierze tylko paragrafy, które są bezpośrednimi potomkami diva o klasie "container".

Selektory sibling

Selektory sibling pozwalają nam wybierać elementy, które są rodzeństwem innego elementu. Na przykład, możemy wybrać wszystkie elementy, które są rodzeństwem diva o klasie "container" za pomocą selektora .container ~ div. Możemy również wykorzystać selektory sibling, aby wybrać elementy, które są bezpośrednimi rodzeństwami danego elementu, np. .container + div wybierze tylko diva, który jest bezpośrednim rodzeństwem diva o klasie "container".

Pseudoklasy

Pseudoklasy są specjalnymi selektorami, które pozwalają nam stylizować elementy w określonych stanach. Na przykład, :hover pozwala nam stylizować element, gdy najedziemy na niego myszką, :active pozwala nam stylizować element, gdy jest wciśnięty, a :focus pozwala nam stylizować element, gdy jest w nim ustawiony focus. Możemy również korzystać z innych pseudoklas, takich jak :first-child, :last-child, :nth-child itp., aby wybrać określone elementy na podstawie ich pozycji w strukturze DOM.

Pseudoelementy

Pseudoelementy są podobne do pseudoklas, ale pozwalają nam dodawać nowe elementy do struktury DOM, które możemy stylizować. Na przykład, ::before pozwala nam dodać fikcyjny element przed wybranym elementem, a ::after pozwala nam dodać fikcyjny element po wybranym elemencie. Możemy wykorzystać pseudoelementy do dodawania dekoracji, ikon, czy innych elementów do naszej strony.

Te zaawansowane selektory CSS dają nam jeszcze większą kontrolę nad naszymi stylami i pozwalają nam tworzyć bardziej zaawansowane i interaktywne strony internetowe. Pamiętaj, żeby korzystać z selektorów z umiarem i staraj się utrzymywać swoje style czyste i czytelne.

Przykład

<div class="container">
  <p>Paragraf 1</p>
  <p>Paragraf 2</p>
</div>

.container p {
  color: red;
}

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

.container ~ div {
  background-color: yellow;
}

.container + div {
  border: 1px solid black;
}

p:first-child {
  font-size: 20px;
}

p:last-child {
  font-size: 10px;
}

p:nth-child(2n) {
  color: blue;
}

.container::before {
  content: 'Przed divem';
  display: block;
  background-color: pink;
}

.container::after {
  content: 'Po divie';
  display: block;
  background-color: green;
}

W powyższym przykładzie, paragrafy wewnątrz diva o klasie "container" będą miały czerwony kolor tekstu, tylko bezpośrednie paragrafy będą miały pogrubioną czcionkę, divy będące rodzeństwem diva o klasie "container" będą miały żółte tło, tylko bezpośredni div będzie miał czarny obramowanie. Pierwszy paragraf będzie miał rozmiar czcionki 20px, ostatni paragraf będzie miał rozmiar czcionki 10px, a co drugi paragraf będzie miał niebieski kolor tekstu. Przed divem będzie dodany fikcyjny element z różowym tłem, a po divie będzie dodany fikcyjny element z zielonym tłem.