Selektory w CSS

Selektory w języku CSS są jedynym sposobem aby nadać konkretny wygląd konkretnym elementom strony. Poniżej dowiesz się więcej o selektorach i ich typach.

Składnia

Selektory w CSS zapisujemy w następujący sposób:

selektor:pseudoklasa { parametr1: wartość1; parametr2: wartość2; }

Lub

selektor:pseudoklasa{parametr1: wartość1; parametr2: wartość2;}

Są to jedyne poprawne i jedyne działające sposóby zapisu selektorów.

Podstawowe selektory

Selektor typu

Selektor typu wybiera wszystkie elementy jego typu. Zapisujemy po prostu dając typ. np.

p { color: blue; }

Zmieni kolor każdego paragrafu(<p>) na kolor niebieski.
Selektora typu można użyć dla większości znaczników dostępnych w HTML.

Do selektora typu można także dopisać selektor klasy lub identyfikatora aby zmodyfikować wygląd każdego takiego elemeentu z tą klasą/identyfikatorem. np.

p.mojaKlasa { color: blue; }

Zmieni wygląd każdego paragrafu(<p>) z klasą class="mojaKlasa"

Selektor identyfikatora

Selektor identyfikatora wybiera KONKRETNY element z takim samym identyfikatorem(z atrybutem, id=""). Selektory identyfikatora zapisujemy z # przed identyfikatorem. np.

#mojElement { text-decoration: underline; }

Doda do elementu z id="mojElement" podkreślenie.

Selektor klasy

Selektor klasy wybiera każdy element z określoną klasą(z atrybutem, class=""). Selektor klasy zapisujemy z . przed nazwą klasy. np.

.mojaKlasa { font-weight: bold; }

Pogrubi każdy element z klasą class="mojaKlasa".

Selektor uniwersalny

Selektor uniwersalny wybiera wszystkie elementy strony. Zapisujemy dając po prostu *. np.

* { box-sizing: border-box; }

Sprawi, że szerokość i wysokość każdego elementu na stronie będzie brała pod uwagę margin, padding oraz border.

Selektor grupowy

Wybiera określoną grupę elementów. Grupa może się składać z znaczników, klas, identyfikatorów. Zapisujemy po koleji wypisując selektory oddzielając przecinkiem. np.

p, #mojElement, .mojaKlasa { color: red; }

Zmienia kolor paragrafów(<p>), elementu z id="mojElement" oraz elementów z klasą class="mojaKlasa" na czerwony.

Selektor potomka

Wybiera każdy element, który jest potomkiem określonego ciągu. Pojedyńcze pokolenia zapisujemy oddzielając spacją. np.

nav ul li a { background-color: green; }

Zmienia kolor tła elementu <a>, który jest elementem dziecięcym <li>, który jest elementem dziecięcym <ul>, który jest elementem dziecięcym <nav> na zielony.

Selektor dziecka

Wybiera każdy konkretny element, który jest bezpośrednim elementem dziecięcym konkretnego elementu. Zapisujemy oddzielając rodzica od dziecka używając >(Rodzic po lewej, dziecko po prawej). np.

div>p { font-weight: bold; }

Pogrubia każdy paragraf(<p>), który jest bezpośrednim elementem dziecięcym elementu <div>.

Selektory pseudoklas i pseudoelementów

Pseudoklasy to dodatkowe informacje jaki stan/część elementu chcemy zmodyfikować. Podajemy je na końcu dowolnego selektora podstawowego. Pseudoklasy zapisujemy z jednym dwukropkiem oddzielającym selektor od pseudoklasy, a pseudoelementy dwoma.
samych pseudoklas jest między 70, a 80, dlatego przedstawimy tu tylko najważniejszą i najczęściej używaną część z nich.

:hover

Modyfikuje wygląd elementu, gdy najedziemy na niego kursorem. np.

#element:hover { color: blue; }

Zmienia kolor elementu z id="element" na niebieski, gdy na niego najedziemy kursorem. [WYPRÓBUJ]

:active

Modyfikuje wygląd naciśniętego elementu. np.

p:active { color: green; }

Zmienia kolor paragrafów(<p>) na zielony po wciśnięciu. [WYPRÓBUJ]

::first-letter

Modyfikuje pierwszą literę elementu. np.

#element::first-letter { font-size: 2em; }

Powiększa pierwszą literę elementu z id="element" dwa razy.

::first-line

Modyfikuje pierwszą linijkę elementu. np.

#element::first-line { font-size: 2em; }

Zmienia kolor pierwszej linijki elementu
z id="element" na czerwony.

:visited

Modyfikuje wygląd odwiedzonego linku. np.

a:visted { color: purple; }

Zmienia kolor <a> jeśli użytkownik już odwiedził tą stronę na fioletowy.

::selection

Modyfikuje wygląd zaznaczonego tekstu. np.

p::selection { color: red; background-color: orange; }

Zmienia kolor paragrafu na czerwony i zmienia tło paragrafu na pomarańczowy gdy użytkownik zaznaczy tekst. [WYPRÓBUJ]

Koniec artykułu.