Rodzaje selektorów w CSS - wszystkie selektory

1. Co to są selektory?

Selektory w języku CSS (Cascading Style Sheets) są kluczowymi elementami, które pozwalają określić, które elementy HTML na stronie internetowej mają być stylizowane. W kontekście projektowania stron internetowych, selektory są narzędziami, które pomagają programiście lub projektantowi precyzyjnie określić, które części dokumentu HTML mają być modyfikowane, a jakie właściwości CSS mają być na nie nałożone.

Ponadto, selektory umożliwiają aplikowanie stylów do elementów HTML w sposób elastyczny i skoordynowany. Ich rola jest kluczowa w separacji treści od prezentacji w stronach internetowych, co jest fundamentalnym założeniem struktury projektów opartych na CSS.

Selektory w CSS mogą opierać się na różnorodnych kryteriach, takich jak typ elementu HTML, jego atrybuty, klasa, identyfikator, relacje z innymi elementami w strukturze dokumentu, a nawet na stanie interakcji użytkownika z elementem. Dzięki nim możliwe jest tworzenie złożonych reguł stylów, które można dostosować do różnych elementów witryny internetowej.

2. Selektor uniwersalny

Selektor uniwersalny w CSS jest jednym z najbardziej ogólnych i wszechstronnych selektorów dostępnych w języku stylów kaskadowych. Jest reprezentowany przez znak gwiazdki (*). Wykorzystanie selektora uniwersalnego oznacza, że reguła CSS będzie stosowana do wszystkich elementów na stronie internetowej, niezależnie od ich typu, klasy czy identyfikatora.

Przykład:

* {
margin: 0;
}

3. Selektor prosty

Selektor prosty w CSS to jeden z najbardziej podstawowych i często używanych rodzajów selektorów. Składa się on z nazwy elementu HTML, co oznacza, że wybiera on wszystkie elementy tego samego typu na stronie internetowej.

Przykład:

p {
font-size: 14px;
}

4. Selektor grupowania

Selektor grupowania w CSS jest potężnym narzędziem, które umożliwia programistom stosowanie tych samych reguł stylów do wielu różnych selektorów. Pozwala on na grupowanie selektorów w jednym wyrażeniu CSS, co przekłada się na bardziej zwięzły i czytelny kod stylów.

Przykład:

p,
span {
color: red;
}

5. Selektor potomka

Selektor potomka w CSS jest jednym z kluczowych narzędzi, które pozwalają na precyzyjne określenie elementów HTML w strukturze dokumentu. Selektor potomka umożliwia wybranie elementów, które są potomkami określonego elementu nadrzędnego. Jest reprezentowany przez spację między selektorami.

Przykład:

div span {
color: green;
}

6. Selektor dziecka

Selektor dziecka w CSS to jedno z kluczowych narzędzi pozwalających na precyzyjne określenie relacji hierarchicznej między elementami HTML w strukturze dokumentu. Selektor ten wybiera elementy, które są bezpośrednimi dziećmi określonego elementu nadrzędnego. Jest reprezentowany przez znak "greater than" (>).

Przykład:

div > span {
font-size: 20px;
}

7. Selektor brata

Selektor brata w CSS jest jednym z kluczowych narzędzi, które pozwalają na określenie stylów dla elementów, które występują bezpośrednio po innym elemencie tego samego rodzica. Jest to przydatne w sytuacjach, gdy chcemy zastosować konkretne style do elementu, który jest bezpośrednim rodzeństwem innego elementu w strukturze HTML.

Ten selektor jest reprezentowany przez znak plus (+) i stosuje się go do wybierania elementów, które występują bezpośrednio po określonym elemencie, a także muszą być tego samego rodzica.

Przykład:

div + p {
color: yellow;
}

8. Selektor braci

Selektor braci w CSS jest użytecznym narzędziem, które pozwala określić stylizację dla wszystkich elementów, które występują na tym samym poziomie hierarchii w strukturze HTML, bez względu na ich rodzica. Jest to przydatne narzędzie, gdy chcemy zastosować pewne style do wszystkich elementów, które występują bezpośrednio po danym elemencie, a mają ten sam rodzic.

Ten selektor jest reprezentowany przez znak tilde (~) i stosuje się go do wybierania wszystkich elementów, które występują na tym samym poziomie hierarchii po określonym elemencie.

Przykład:

div ~ p {
color: yellow;
}

9. Selektor atrybutu

Selektor atrybutu w CSS to potężne narzędzie, które umożliwia wybieranie elementów HTML na podstawie ich atrybutów lub wartości atrybutów. Dzięki temu selektorowi możemy zastosować konkretne style do elementów, które posiadają określone atrybuty lub spełniają określone warunki.

Selektor atrybutu jest reprezentowany przez nawiasy kwadratowe ([]), w których określamy nazwę atrybutu, a w niektórych przypadkach również jego wartość.

Przykład:

h3 [title] {
font-size: 24px;
}
h3 [title="tytuł"] {
font-size: 24px;
}

10. Selektor klasy

Selektor klasy w CSS jest jednym z podstawowych narzędzi, które pozwalają programistom określać i stosować style do grup elementów HTML. Selektor ten jest używany do wybrania elementów, które posiadają określoną klasę, co umożliwia aplikację tych samych stylów do wielu elementów na stronie.

Aby zastosować styl do elementów o określonej klasie, wystarczy użyć kropki (.) przed nazwą klasy w CSS.

Przykład:

.box {
background-color: black;
}

11. Selektor identyfikatora

Selektor identyfikatora w CSS jest narzędziem, które umożliwia precyzyjne określenie stylów dla konkretnego elementu HTML na stronie internetowej. Identyfikatory są unikalne dla każdego elementu na stronie i służą do jednoznacznego zidentyfikowania danego elementu w strukturze dokumentu.

Aby zastosować styl do elementu o określonym identyfikatorze, używamy selektora identyfikatora, który jest poprzedzony znakiem krzyżyka (#) i następuje po nim nazwa identyfikatora.

Przykład:

#error {
background color: red;
}

12. Selektor pseudoklas

Selektory pseudoklasy w CSS są narzędziem, które umożliwia programistom stosowanie stylów do elementów HTML w zależności od ich stanu lub relacji z użytkownikiem. Pseudoklasy pozwalają na dynamiczne zmiany stylów w zależności od różnych czynników, takich jak interakcje użytkownika, stan formularza czy położenie myszy.

Pseudoklasy są reprezentowane przez dwukropek (:) i mogą być stosowane do wybrania elementów w różnych stanach.

Przykład:

a:hover {
color: red;
text-decoration: underline;
}

13. Selektor pseudoelementów

Selektory pseudoelementów w CSS stanowią potężne narzędzie, które umożliwia dodawanie specjalnych efektów lub stylów do określonych części elementów HTML. Pseudoelementy reprezentują pewne fragmenty elementów, które nie istnieją fizycznie w strukturze HTML, lecz mogą być stylizowane za pomocą CSS.

Aby zastosować styl do pseudoelementu, używamy dwukropka (::) przed nazwą pseudoelementu. Przykładowo, ::before tworzy pseudoelement, który jest pierwszym dzieckiem danego elementu, natomiast ::after tworzy pseudoelement, który jest ostatnim dzieckiem danego elementu.

Przykład:

span::before {
content: "Pseudo tekst";
}