Aby strony internetowe były często odwiedzane przez internautów muszą być bogate w wartościowe treści i jednocześnie muszą przyciągać odwiedzającego atrakcyjnym wyglądem. Do tego właśnie służą kaskadowe arkusze styli.

Stylowanie elementów polega na odwołaniu się za pomocą selektora do pewnego elementu (lub elementów) i nadaniu jednego lub kilku atrybutów z odpowiednią wartością. Selektory opisane w tym wpisie pozwalają na stylowanie poszczególnych elementów strony internetowej. Ogólny zapis wygląda następująco:

selektor {
    atrybut: wartość;
}

Podobnie jak w przypadku znaczników HTML tutaj również nie ma potrzeby ani konieczności uczenia się wszystkiego na pamięć.

We wpisie wyjaśniającym czym jest CSS założyliśmy, że będziemy odwoływać się do elementów poprzez klasy i tego samego sposobu (w miarę możliwości) będziemy używali tutaj.

Podstawowe selektory CSS

Selektor każdego elementu: *

Najłatwiejszy i najpopularniejszy, a jednocześnie najsłabszy i najmniej wydajny selektor CSS. Symbolem * odwołujemy się do wszystkich elementów na stronie internetowej.

* {
    margin: 12px;
}

Powyższy zapis sprawi, że każdy element na stronie będzie posiadał marginesy o wartości 12 pikseli.

Selektor jednego elementu

Stylowanie wszystkich elementów o podanej nazwie odbywa się poprzez podanie nazwy tych elementów.

p {
    color: red;
}

Powyższy zapis sprawi, że każdy paragraf będzie posiadał czcionkę o czerwonym kolorze.

Selektor identyfikatora: #

Najbardziej jednoznaczny selektor CSS. Symbolem # odwołujemy się do elementu podając wartość jego atrybutu id. Poprawny semantycznie kod HTML zawiera tylko jeden element o podanym identyfikatorze.

#logout {
    font-size: 16px;
}

Powyższy zapis sprawi, że element z identyfikatorem logout (id="logout") będzie zapisany czcionką o rozmiarze 16 pikseli.

Selektor klasy: .

Najczęściej używany selektor. Elementy mogą posiadać wiele klas, co w wielu przypadkach może okazać się bardzo pomocne.

.list-item {
    font-style: italic;
}

Powyższy zapis sprawi, że elementy posiadające klasę list-item (class="list-item") będą zapisane kursywą.

Selektor potomka: spacja

Chcąc ostylować element znajdujący się gdzieś wewnątrz innego elementu użyjemy selektora potomka, czyli spacji.

.list .list-item {
    color: blue;
}

Powyższy zapis sprawi, że niebieskim kolorem zostanie zapisany każdy element posiadający klasę list-item, który jednocześnie znajduje się gdzieś wewnątrz elementu posiadającego klasę list.

Selektor bezpośredniego potomka: >

Istnieje drobna, choć bardzo ważna różnica między selektorem potomka a selektorem bezpośredniego potomka. W przypadku selektora bezpośredniego potomka stylujemy element będący pierwszym potomkiem innego elementu.

.box > .description {
    font-size: 16px;
}

Powyższy zapis sprawi, że czcionką o rozmiarze 16 pikseli zostanie zapisany element z klasą description będący pierwszym elementem wewnątrz elementu z klasą box.

Selektor każdego sąsiada: ~

W celu ostylowania wielu elementów występujących bezpośrednio po innym elemencie należy użyć symbolu ~.

.title ~ .paragraph {
    color: red;
}

Powyższy zapis sprawi, że czerwonym kolorem zostanie zapisany każdy element posiadający klasę paragraph, który jednocześnie występuje po elemencie posiadającym klasę title.

Selektor bezpośredniego sąsiada: +

Aby ostylować element występujący bezpośrednio po innym elemencie, należy użyć symbolu +.

.list + .description {
    font-style: italic;
}

Powyższy zapis sprawi, że kursywą zostanie zapisany tekst w elemencie z klasą description, który znajduje się tuż za elementem z klasą list.

Zaawansowane selektory CSS

Selektor elementu, nad którym znajduje się kursor: :hover

Selektor :hover służy do nadania styli elementowi, nad którym znajduje się kursor.

.my-anchor:hover {
    border-bottom: 2px solid green;
}

Powyższy zapis sprawi, że po najechaniu kursorem na element z klasą my-anchor dolna krawędź tego elementu będzie miała szerokość 2 pikseli, będzie ciągła i będzie miała zielony kolor.

Selektor wykluczający: :not()

Do tej pory odwoływaliśmy się do wszystkich elementów spełniających wskazane wymagania. Jeśli jednak chcemy ograniczyć zbiór tych elementów powinniśmy użyć selektora :not().

.feature:not(.new) {
    background-color: red;
}

Powyższy zapis sprawi, że czerwone tło będzie posiadał każdy element posiadający klasę feature, ale nieposiadający klasy new.

Selektor pierwszej linii tekstu: ::first-line

Korzystając z kaskadowych arkuszy styli możemy z łatwością ostylować pierwszą linię tekstu.

.text::first-line {
    color: green;
}

Powyższy zapis sprawi, że kolorem zielonym zostanie zapisana pierwsza linia tekstu posiadającego klasę text. Uwaga: Przed selektorem ::first-line stawiamy dwa dwukropki.

Selektor pierwszej litery tekstu: ::first-letter

Podobnie jak możemy ostylować pierwszą linię, tak samo możemy ostylować pierwszą literę tekstu.

.text::first-letter {
    font-size: 20px;
}

Powyższy zapis sprawi, że rozmiarem 20 pikseli zostanie zapisana pierwsza litera w tekście posiadającym klasę text. Uwaga: Przed selektorem ::first-letter stawiamy dwa dwukropki.

Selektor pierwszego potomka: :first-child

Odwołanie do pierwszego potomka odbywa się za pomocą selektora :first-child.

.list .list-item:first-child {
    font-weight: bold;
}

Powyższy zapis sprawi, że pogrubioną czcionką zostanie zapisany pierwszy element posiadający klasę list-item będący wewnątrz elementu posiadającego klasę list.

Selektor ostatniego potomka: :last-child

Odwołanie do ostatniego potomka odbywa się za pomocą selektora :last-child.

.list .list-item:last-child {
    font-weight: bold;
}

Powyższy zapis sprawi, że pogrubioną czcionką zostanie zapisany ostatni element posiadający klasę list-item będący wewnątrz elementu posiadającego klasę list.

Selektor n-tego potomka: :nth-child(n)

Odwołanie do n-tego potomka odbywa się za pomocą selektora :nth-child(n), gdzie n to liczba naturalna większa od 0 (numerowanie potomków rozpoczyna się od 1).

.row-with-data:nth-child(3) {
    background-color: blue;
}

Powyższy zapis sprawi, że niebieskie tło będzie miał trzeci potomek dowolnego elementu posiadający klasę row-with-data.

Ten selektor pozwoli w szczególności na odwołanie do parzystych potomków pewnej listy.

.users-list .user-row:nth-child(2n) {
    background-color: grey;
}

Powyższy zapis sprawi, że wewnątrz elementu posiadającego klasę users-list parzyste (2n) wiersze posiadające klasę user-row będą miały szare tło.

Selektor n-tego od końca potomka: :nth-last-child(n)

Ten selektor działa podobnie do selektora :nth-child(n) z tą różnicą, że za jego pomocą odwołujemy się do n-tego potomka licząc od końca.

.list .item:nth-last-child(2) {
    color: red;
}

Powyższy zapis sprawi, że kolorem czerwonym zostanie zapisany obecny wewnątrz elementy posiadającego klasę list przedostatni (2) potomek posiadający klasę item.

Selektor jedynego potomka: :only-child

Za pomocą tego selektora ostylujemy element pod warunkiem, że jest on jedynym potomkiem pewnego elementu.

.details .message:only-child {
    color: blue;
}

Powyższy zapis sprawi, że niebieskim kolorem zostanie zapisany element posiadający klasę message, który jest jedynym potomkiem elementu posiadającego klasę details.

Podsumowanie

Używając ze zrozumieniem opisanych powyżej selektorów będziemy mogli z powodzeniem stylować elementy na stronach internetowych. Powodzenia!

Kategorie: Wpis na blogu