W tej lekcji omówimy tylko podstawowe rodzaje selektorów. W dalszej części tego kursu, ten temat będzie rozwinięty jeszcze bardziej.
Selektory można podzielić na:
- selektory proste,
- selektory złożone (zawierające relacje pomiędzy elementami),
- selektory z pseudo klasami,
- selektory z pseudo elementami,
- selektor atrybutu.
Selektory proste
W tej lekcji skupimy się na selektorach prostych, które można podzielić na:
- selektory elementów,
- selektory klas,
- selektory identyfikatorów,
- selektory grupujące.
Selektory elementów
Selektory elementów, służą do nadawania takiego samego wyglądu, elementom tego samego typu. Jeżeli chcesz, aby wszystkie paragrafy lub jakieś inne elementy, wyglądały identycznie, to selektor elementów jest bardzo dobrym rozwiązaniem.
Selektory klas
Może się zdarzyć, że chcesz, aby tylko niektóre paragrafy wylatały inaczej. W takim wypadku dobrym rozwiązaniem jest oznaczenie elementu HTML klasą. Aby to zrobić, należy dodać atrybut class="nazwaKlasy". W składni CSS, klasa musi być poprzedzona kropką.
Selektory identyfikatorów
Jeżeli jakiś element, ma posiadać wyjątkowy wygląd, to możesz do tego celu wykorzystać klasę. Nie jest to jednak do końca optymalny wybór, bo wiele elementów może posiadać tę samą klasę. Lepszym rozwiązaniem może okazać się wykorzystanie identyfikatora, ponieważ identyfikator elementu powinien być unikalny w ramach strony/pliku HTML
Aby nadać identyfikator, to do elementu HTML należy dodać atrybut id="nazwaIdentyfikatora". W kodzie CSS, odwołujemy się do niego poprzez nazwę identyfikatora, która musi być poprzedzona krzyżykiem.
Zauważ, że unikalny paragraf posiada również klasę. Mimo to, nadawane są style, które odnoszą się identyfikatora. Dlaczego tak jest, mówi poniższa informacja.
Selektory grupujące
Selektory grupujące były już zaprezentowane na poprzedniej lekcji. Służą one do łączenia selektorów w grupy. Dzięki temu dana grupa będzie posiadać takie same właściwości.