Przejdź do treści

Selektory pseudoklas CSS

Używanie selektorów pseudoklas w arkuszach CSS (kolory odsyłaczy).

Co to są pseudoklasy CSS?

Do czego przydają się pseudoklasy CSS?

Style CSS normalnie są dodawane do elementów na podstawie ich pozycji w drzewie dokumentu. Taki model nie zawsze jednak jest wystarczający. Pseudoklasy klasyfikują elementy inaczej niż po ich nazwie, atrybutach czy zawartości, tzn. w zasadzie nie są ustalane na podstawie drzewa dokumentu. Mogą być dynamiczne w tym sensie, że element "nabywa" lub "traci" pseudoklasę podczas interakcji z użytkownikiem. Przykładem jest podświetlenie elementu po wskazaniu go myszką przez użytkownika.

Wszystkie pseudoklasy można podzielić w następujący sposób:

  1. Pseudoklasy dynamiczne
  2. Pseudoklasa etykiety: :target
  3. Pseudoklasa języka: :lang()
  4. Pseudoklasy interfejsu użytkownika:
  5. Pseudoklasy strukturalne:
  6. Pseudoklasa negacji: :not()

Odsyłacz podstawowy :link

Jak zmienić wygląd odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

a:link { cecha: wartość }
gdzie litera "a" na początku deklaracji, jest selektorem odsyłacza [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie pozwala nadać określone atrybuty formatowania dla wszystkich podstawowych odsyłaczy na stronie czyli takich, które nie zostały jeszcze odwiedzone przez użytkownika.

Ponieważ pseudoklasa :link odnosi się tylko do odsyłaczy, w regule stylu można pominąć selektor elementu a:

📋 Zaznacz kod

:link { cecha: wartość }

Przykład :link

Jeżeli nie byłeś jeszcze na stronie głównej organizacji W3C, to ten odsyłacz powinien być pogrubiony.

Pytania i odpowiedzi

Jak wstawić odsyłacz?

Odsyłacz w HTML wstawiamy za pomocą znacznika <a href="...">...</a>, gdzie atrybut href="..." określa adres docelowy. Na przykład: <a href="https://www.example.com">Tekst odsyłacza</a>.

Jaki kolor ma link?

Domyślnie linki są niebieskie (kolor #0000FF czyli blue), a odwiedzone linki są fioletowe (kolor #800080 czyli purple).

Jak zmienić kolor odsyłacza HTML?

Aby zmienić kolor odsyłacza w HTML, można użyć atrybutu style="..." lub zdefiniować regułę CSS. Na przykład: <a href="https://www.example.com" style="color: red">Tekst odsyłacza</a> lub w arkuszu stylów CSS: a { color: red; }.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:link1
2008-12-11
1
2004-11-09
12
2015-07-29
3.5
1998-11-18
1
2003-06-23
 100%

Odsyłacz odwiedzony :visited

Jak zmienić wygląd odwiedzonych odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

a:visited { cecha: wartość }
gdzie litera "a" na początku deklaracji, jest selektorem odsyłacza [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie pozwala nadać określone atrybuty formatowania dla wszystkich odsyłaczy, które zostały już odwiedzone przez użytkownika.

Ponieważ pseudoklasa :visited odnosi się tylko do odsyłaczy, w regule stylu można pominąć selektor elementu a:

📋 Zaznacz kod

:visited { cecha: wartość }

Przykład :visited

Jeżeli byłeś już na stronie głównej organizacji W3C, to ten odsyłacz powinien być pogrubiony.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:visited1
2008-12-11
1
2004-11-09
12
2015-07-29
3.5
1998-11-18
1
2003-06-23
 100%

Aktywacja :active

Jak zmienić wygląd aktywnych elementów - np. odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

selektor:active { cecha: wartość }
Selektorem wg CSS 2 teoretycznie może być dowolny znacznik.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie pozwala nadać określone atrybuty formatowania dla elementów, które zostały aktywowane przez użytkownika. Może to mieć miejsce np. kiedy użytkownik wciśnie i przytrzyma przycisk myszki na odsyłaczu - aktywacja będzie miała miejsce do momentu zwolnienia przycisku myszki.

UWAGA!
Kolejność deklarowania pseudoklas w arkuszu stylów przypisanych do odsyłaczy ma znaczenie. Wykonanie tego w niewłaściwy sposób może być przyczyną braku efektu podczas aktywacji czy wskazania myszką!

Prawidłowa kolejność jest następująca:

📋 Zaznacz kod

a:link { cecha: wartość }
a:visited { cecha: wartość }
a:hover { cecha: wartość }
a:active { cecha: wartość }

Przykład :active

Jeżeli wciśniesz i przytrzymasz przycisk myszki nad tym odsyłaczem, to do chwili zwolnienia przycisku, będzie on pogrubiony.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:active1
2008-12-11
1
2004-11-09
12
2015-07-29
5
2000-12-06
1
2003-06-23
 100%

Wskazanie myszką :hover

Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

selektor:hover { cecha: wartość }
Selektorem wg CSS 2 teoretycznie może być dowolny znacznik.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie pozwala nadać określone atrybuty formatowania dla elementów, nad którymi znajduje się wskaźnik myszki, kiedy użytkownik jeszcze ich nie kliknął, tzn. nie zostały jeszcze aktywowane.

UWAGA!
Kolejność deklarowania pseudoklas w arkuszu stylów przypisanych do odsyłaczy ma znaczenie. Wykonanie tego w niewłaściwy sposób może być przyczyną braku efektu podczas aktywacji czy wskazania myszką!

Prawidłowa kolejność jest następująca:

📋 Zaznacz kod

a:link { cecha: wartość }
a:visited { cecha: wartość }
a:hover { cecha: wartość }
a:active { cecha: wartość }

Przykład :hover

Jeżeli wskażesz, ale nie klikniesz ten odsyłacz myszką, to do chwili usunięcia wskaźnika myszki, będzie on pogrubiony.

Pytania i odpowiedzi :hover

Jak zmienić kolor linku po najechaniu CSS?

Aby zmienić kolor linku po najechaniu myszką, można wykorzystać pseudoklasę :hover w CSS. Na przykład: a:hover { color: green; }. To spowoduje, że kolor linku zmieni się na zielony, gdy użytkownik najedzie na niego myszką.

Co znaczy :HOVER w CSS?

:hover to pseudoklasa w CSS, która jest aktywowana, gdy użytkownik najedzie na element myszką. Można ją wykorzystać do definiowania stylów dla efektów wizualnych podczas interakcji z elementami, takimi jak zmiana koloru linku po najechaniu.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:hover1
2008-12-11
1
2004-11-09
12
2015-07-29
4
2000-06-28
2
2005-04-29
 100%

Zogniskowanie :focus

Jak zmienić wygląd pola tekstowego formularza po wybraniu przez użytkownika?

selektor:focus { cecha: wartość }
Selektor wskazuje jakiemu elementowi nadajemy formatowanie (dla selektora uniwersalnego są to wszystkie elementy) [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie pozwala nadać określone atrybuty formatowania dla elementu (np. odsyłacza lub pola formularza), który przyjmuje w danej chwili zogniskowanie. Przykładowo dotyczy to odsyłacza, wybranego za pomocą klawisza tabulatora czy pola formularza, w którym znalazł się kursor.

Przykład :focus

📋 Zaznacz kod ▶ Edytuj na żywo

textarea:focus { color: white; background-color: black }

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:focus1
2008-12-11
1
2004-11-09
12
2015-07-29
7
2003-01-28
1
2003-06-23
 100%

Atrybut języka :lang

W jaki sposób zmienić wygląd elementów, zawierających tekst w wybranym języku?

selektor:lang(język) { cecha: wartość }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].
Jako "język" należy wpisać nazwę języka, np. pl - polski, en - angielski).
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie pozwala nadać określone atrybuty formatowania dla elementów, którym został nadany z poziomu HTML atrybut języka lang="..." [zobacz: Skróty nazw języków]. Różnica pomiędzy selektorem atrybutu [lang|="..."] a pseudoklasą :lang(...) polega na tym, że w pierwszym przypadku element musi mieć bezpośrednio przypisany atrybut lang="...", podczas gdy użycie pseudoklasy pozwala na bardziej inteligentny wybór - uwzględniając dziedziczenie języka określonego przez inne źródła, tj. nagłówek HTTP Content-Language, język strony, propagację atrybutu lang="..." przypisanego dla elementu nadrzędnego:

📋 Zaznacz kod ▶ Edytuj na żywo

<body lang="pl">
	<p>Ten akapit jest napisany w języku polskim.<p>
</body>

📋 Zaznacz kod ▶ Edytuj na żywo

/* Ta reguła zostanie zastosowana: */
p:lang(pl) { color: red }
/* Ta reguła nie zostanie zastosowana: */
p[lang|="pl"] { color: blue }

Przykład :lang

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

p:lang(en) { color: red }
div:lang(en) { border: 1px solid red }
a następnie w kodzie źródłowym:

📋 Zaznacz kod ▶ Edytuj na żywo

<p lang="en">1. This is paragraph with attribute <b>lang="en"</b>.</p>
<p lang="en-US">2. This is paragraph with attribute <b>lang="en-US"</b>.</p>
<div lang="en">This is block with attribute <b>lang="en"</b>...
	<p>3. This is paragraph inside block, but without attribute lang.</p>
	<p lang="pl">4. To jest akapit wewnątrz bloku, który posiada atrybut <b>lang="pl"</b> i dlatego jego wygląd nie zmieni się, pomimo że blok nadrzędny posiada atrybut lang="en".</p>
...and this is end of block.</div>

Na ekranie powinniśmy otrzymać pierwsze trzy akapity napisane kolorem czerwonym, a ostatni bez zmian:

1. This is paragraph with attribute lang="en".

2. This is paragraph with attribute lang="en-US".

This is block with attribute lang="en"...

3. This is paragraph inside block, but without attribute lang.

4. To jest akapit wewnątrz bloku, który posiada atrybut lang="pl" i dlatego jego wygląd nie zmieni się, pomimo że blok nadrzędny posiada atrybut lang="en".

...and this is end of block.
  1. Pierwszy akapit ma bezpośrednio przypisany atrybut lang="en".
  2. Drugi lang="en-US" (zwróć uwagę, że pseudoklasa :lang() obsługuje łączniki w skrótach nazw języków - np. en-US).
  3. Trzeci nie ma atrybutu lang, ale znajduje się wewnątrz bloku z atrybutem lang="en".
  4. Ostatni akapit również znajduje się w tym bloku, ale posiada przypisany oddzielnie atrybut lang="pl" i tylko ten jeden akapit nie jest czerwony.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:lang1
2008-12-11
1
2004-11-09
12
2015-07-29
8
2005-04-19
3.1
2008-03-18
 100%

Pierwsze dziecko :first-child

Jak zmienić wygląd pierwszego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

  1. Dowolny rodzic:
    dziecko:first-child { cecha: wartość }
  2. Określony rodzic:
    rodzic > dziecko:first-child { cecha: wartość }
Rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Pierwsze z poleceń pozwala nadać określone atrybuty formatowania dla elementów, będących pierwszym dzieckiem dowolnego innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu. Rodzaj znacznika rodzica nie ma w tym przypadku znaczenia. Natomiast drugie polecenie pozwala dodatkowo określić nazwę znacznika rodzica.

Przykład :first-child

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

b:first-child { color: red }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (powinno być czerwone)</b> oraz <b>drugie pogrubienie (nie powinno być czerwone)</b>.</p>
na ekranie powinniśmy otrzymać tekst, w którym zawiera się pogrubienie koloru czerwonego:

To jest akapit, wewnątrz którego znajduje się pierwsze pogrubienie (powinno być czerwone) oraz drugie pogrubienie (nie powinno być czerwone).

Zwróć uwagę, że zwykły tekst znajdujący się na początku rodzica, przed pierwszym dzieckiem, nie ma wpływu na działanie tego selektora. Dzieje się tak dlatego, gdyż tzw. anonimowy tekst nie jest częścią drzewa dokumentu.


Dla reguły w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

p > b:first-child { color: red }

odpowiednie atrybuty otrzyma pogrubienie (znacznik b), będący pierwszym dzieckiem elementu p. Jeśli będzie się on zawierał w innym znaczniku, jego wygląd nie zostanie zmieniony:

To jest akapit, a to pogrubienie, czyli pierwsze dziecko (powinno być czerwone), wewnątrz tego akapitu.

To jest akapit, a to pochylenie, czyli pierwsze dziecko (nie powinno być czerwone, ponieważ nie jest pogrubieniem), wewnątrz tego akapitu. Tutaj z kolei jest pogrubienie (nie powinno być czerwone), ale drugie nie pierwsze dziecko.

To jest akapit, a to pochylenie i pogrubienie (nie powinno być czerwone), wewnątrz pochylenia.


Inny przykład:

📋 Zaznacz kod ▶ Edytuj na żywo

p:first-child b { color: red }

Odpowiednie cechy otrzyma znacznik b, będący potomkiem elementu p, który z kolei jest czyimś pierwszym dzieckiem (nie ma znaczenia czyim), np.:

📋 Zaznacz kod ▶ Edytuj na żywo

<div>
	<p>To jest akapit (pierwsze dziecko) wewnątrz bloku, a to jest <i>pochylenie, wewnątrz którego znajduje się <b>pogrubienie (powinno być czerwone)</b></i>.</p>
</div>

To jest akapit (pierwsze dziecko) wewnątrz bloku, a to jest pochylenie, wewnątrz którego znajduje się pogrubienie (powinno być czerwone).

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:first-child4
2010-01-25
3
2008-06-17
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%

Ostatnie dziecko :last-child

Jak zmienić wygląd ostatniego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

CSS 3

  1. Dowolny rodzic:
    dziecko:last-child { cecha: wartość }
  2. Określony rodzic:
    rodzic > dziecko:last-child { cecha: wartość }
Rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Pierwsze z poleceń pozwala nadać określone atrybuty formatowania dla elementów, będących ostatnim dzieckiem dowolnego innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu. Rodzaj znacznika rodzica nie ma w tym przypadku znaczenia. Natomiast drugie polecenie pozwala dodatkowo określić nazwę znacznika rodzica.

Przykład :last-child

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

b:last-child { color: red }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (nie powinno być czerwone)</b> oraz <b>drugie pogrubienie (powinno być czerwone)</b>.</p>
na ekranie powinniśmy otrzymać tekst, w którym zawiera się pogrubienie koloru czerwonego:

To jest akapit, wewnątrz którego znajduje się pierwsze pogrubienie (nie powinno być czerwone) oraz drugie pogrubienie (powinno być czerwone).

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:last-child1
2008-12-11
1
2004-11-09
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%

Jedyne dziecko :only-child

Jak zmienić wygląd elementu dziecka, który nie ma braci?

CSS 3

  1. Dowolny rodzic:
    dziecko:only-child { cecha: wartość }
  2. Określony rodzic:
    rodzic > dziecko:only-child { cecha: wartość }
Rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie pozwala nadać określone atrybuty formatowania dla elementu, który jest dzieckiem innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu, ale tylko jeśli rodzic nie ma już innych dzieci.

Przykład :only-child

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

b:only-child { color: red }
otrzymamy na stronie:

To jest akapit, wewnątrz którego znajduje się pogrubienie (powinno być czerwone). Ten akapit ma tylko jedno dziecko.

Dla porównania to jest akapit, wewnątrz którego znajduje się pierwsze pogrubienie (nie powinno być czerwone) oraz drugie pogrubienie (również nie powinno być czerwone). Ten akapit ma więcej niż jedno dziecko.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:only-child2
2009-05-21
1.5
2005-11-29
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%

Pseudoklasy typu :first-of-type :last-of-type :only-of-type

W jaki sposób zmienić wygląd tylko pierwszego elementu określonego typu?

CSS 3

  1. Pierwszy element wybranego typu:
    selektor:first-of-type { cecha: wartość }
    rodzic > dziecko:first-of-type { cecha: wartość }
  2. Ostatni element wybranego typu:
    selektor:last-of-type { cecha: wartość }
    rodzic > dziecko:last-of-type { cecha: wartość }
  3. Jedyny element wybranego typu:
    selektor:only-of-type { cecha: wartość }
    rodzic > dziecko:only-of-type { cecha: wartość }
Selektorem, rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Załóżmy, że mamy na stronie listę definicyjną itp.), która - jak wiemy - składa się ze znaczników terminów (DT) i definicji tych terminów (DD). Chcielibyśmy zmienić sposób formatowania tylko pierwszej definicji listy. Oczywiście można to zrobić nadając mu klasę. Nie jest to jednak najlepsze rozwiązanie, ponieważ niepotrzebnie zwiększa rozmiar dokumentu, a przy tym jeśli w przyszłości zrezygnujemy z takiego formatowania (lub jedna ze skórek nie będzie go wymagać), zbędna klasa zacznie zaśmiecać kod. Jednocześnie nie możemy się posłużyć selektorem pierwszego dziecka, gdyż pierwszym dzieckiem listy będzie znacznik terminu (DT), a nie definicja (DD). Problem rozwiązują podane wyżej selektory, ponieważ pozwalają wybrać tylko elementy określonego typu.

Przykład :first-of-type :last-of-type :only-of-type

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

dl > dd:first-of-type { font-weight: bold } /* wytłuszczenie */
dl > dt:last-of-type { font-style: italic } /* kursywa */
dl > dt:only-of-type { text-decoration: underline } /* podkreślenie */
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<dl>
<dt>Termin 1</dt><dd>Definicja 1</dd>
<dt>Termin 2</dt><dd>Definicja 2</dd>
<dt>Termin 3</dt><dd>Definicja 3</dd>
</dl>
<dl>
<dt>Termin 1</dt><dd>Definicja 1</dd>
</dl>
na stronie powinniśmy otrzymać wykaz, w którym tekst pierwszego punktu będzie pogrubiony, a ostatniego - pochylony:
Termin 1
Definicja 1
Termin 2
Definicja 2
Termin 3
Definicja 3
Termin 1
Definicja 1

Zwróć uwagę, że tylko termin drugiej z list jest podkreślony, ponieważ pierwsza lista posiada więcej niż jeden element <dt>...</dt>. Jednocześnie, ponieważ jedyny termin drugiej listy jest zarazem ostatnim takim elementem, przyjmie również określony wcześniej dodatkowy sposób formatowania - kursywę. Natomiast jedyna definicja drugiej listy jest zarazem na niej pierwsza, więc będzie pogrubiona.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:first-of-type1
2008-12-11
3.5
2009-06-30
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%
:last-of-type1
2008-12-11
3.5
2009-06-30
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%
:only-of-type1
2008-12-11
3.5
2009-06-30
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%

Etykieta :target

Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?

CSS 3

selektor:target { cecha: wartość }
Selektorem może być praktycznie dowolny znacznik, który posiada atrybut id="..." albo ewentualnie może to być element A posiadający atrybut name="..." [zobacz: Odsyłacz do etykiety i Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Czasami podział serwisu na podstrony jest niewystarczający. Zdarza się, że jeden artykuł jest podzielony dodatkowo na niewielkie sekcje - zbyt małe, aby tworzyć z każdej z nich osobną podstronę. Chcielibyśmy jednak mieć możliwość odesłania czytelnika bezpośrednio do podanej sekcji, żeby nie musiał jej szukać "ręcznie". W takiej sytuacji stosuje się etykiety (np.: <h2 id="nazwa_etyiety">Nazwa sekcji</h2>). Do takich etykiet można później tworzyć odsyłacze. Problemem takiego rozwiązanie może być fakt, że jeśli czytelnik przewinie stronę, może mieć problemy z późniejszym odszukaniem etykiety, do której pierwotnie został skierowany. Prezentowane tutaj polecenie pozwala wyróżnić wizualnie właśnie taką etykietę, podczas gdy ewentualne pozostałe etykiety na tej samej podstronie pozostaną bez zmian.

Przykład :target

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

:target { font-weight: bold }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<span id="przyklad_etykieta1">etykieta "przyklad_etykieta1"</span>, <span id="przyklad_etykieta2">etykieta "przyklad_etykieta2"</span>
<p><a href="#przyklad_etykieta1">odsyłacz "#przyklad_etykieta1"</a>, <a href="#przyklad_etykieta2">odsyłacz "#przyklad_etykieta2"</a></p>
po kliknięciu linku do danej etykiety, zostanie ona pogrubiona (w tym czasie druga etykieta nie będzie pogrubiona):

etykieta "przyklad_etykieta1", etykieta "przyklad_etykieta2"

Aby przetestować, kliknij w poniższe linki:

odsyłacz "#przyklad_etykieta1", odsyłacz "#przyklad_etykieta2"

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:target1
2008-12-11
1
2004-11-09
12
2015-07-29
9.5
2008-06-12
1.3
2005-04-15
 100%

Blokada :disabled :enabled

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane (wyszarzone)?

CSS 3

  1. Pole zablokowane:
    selektor:disabled { cecha: wartość }
  2. Pole odblokowane:
    selektor:enabled { cecha: wartość }
Selektorem mogą być pola formularza, którym można przypisać atrybut disabled="..." [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Pola formularza mogą znajdować się w wielu stanach - jednym z nich jest blokada kontrolki. Zablokowane pole w większości przeglądarek wyświetlane jest w formie wyszarzonej. Użytkownik nie może do niego wpisywać żadnego tekstu ani go włączyć (w przypadku kontrolek typu przełącznik). Blokadę ustala się poprzez przypisanie atrybutu disabled. W odróżnieniu od pól w stanie tylko do odczytu (atrybut readonly), pola zablokowane nie są w ogóle wysyłane w formularzu. Pole odblokowane to natomiast takie, które nie posiada atrybutu disabled (domyślnie).

Przykład :disabled :enabled

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

input:disabled { border: 1px solid blue }
input:enabled { border: 1px solid red }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<form action="?">
	<input type="text" value="Zablokowane" disabled>
	<input type="text" value="Odblokowane">
</form>
otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:enabled1
2008-12-11
1
2004-11-09
12
2015-07-29
9
2006-06-20
3.1
2008-03-18
 100%
:disabled1
2008-12-11
1
2004-11-09
12
2015-07-29
9
2006-06-20
3.1
2008-03-18
 100%

Tylko do odczytu :read-only :read-write

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane do zapisu?

CSS 3

  1. Pole tylko do odczytu:
    selektor:read-only { cecha: wartość }
  2. Pole do odczytu i do zapisu:
    selektor:read-write { cecha: wartość }
Selektorem powinny być pola formularza, którym można przypisać atrybut readonly="..." [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Niektóre pola formularza (pole tekstowe, hasło, obszar tekstowy) mogą być zablokowane w taki sposób, że użytkownik nie będzie mógł zmienić ich wartości. Mimo tego, w odróżnieniu od pól całkowicie zablokowanych (z przypisanym atrybutem disabled), wartości z pól zablokowanych do zapisu będą normalnie wysłane z formularzem. Biorąc pod uwagę, że wiele przeglądarek w żaden sposób nie wyróżnia graficznie pól, które zostały oznaczone jako tylko do odczytu, nieświadomy tego użytkownik może bez końca próbować zmienić ich zawartość. Z tego punktu widzenia bardzo ważnym może okazać się graficzne wyróżnienie za pomocą CSS pól tylko do odczytu.

Przykład :read-only :read-write

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

input:read-only { border: 1px solid blue }
input:read-write { border: 1px solid red }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<form action="?">
	<input type="text" value="Tylko do odczytu" readonly>
	<input type="text" value="Do odczytu i do zapisu">
</form>
otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:read-only1
2008-12-11
78
2020-06-30
13
2015-11-12
9
2006-06-20
4
2009-06-08
 100%
:read-write1
2008-12-11
78
2020-06-30
13
2015-11-12
9
2006-06-20
4
2009-06-08
 100%

Zaznaczenie :checked

Jak zmienić wygląd pól (kontrolek) formularza, które są zaznaczone?

CSS 3

selektor:checked { cecha: wartość }
Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Niektóre z pól formularzy pełnią rolę przełączników - można je zaznaczać i odznaczać. W związku z tym może się okazać przydatne dodatkowe wizualne wyróżnienie tych kontrolek, które użytkownik zaznaczył.

Zaznaczenie dla opcji listy rozwijalnej obsługuje tylko Firefox.

Przykład :checked

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

input:checked, option:checked { margin-left: 30px }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<form action="?">
	<fieldset>
	<input type="radio" checked name="pole_opcji">
	<input type="radio" name="pole_opcji">
	</fieldset>
	<fieldset>
	<input type="checkbox" checked>
	<input type="checkbox">
	</fieldset>
	<select size="3">
	<option selected>Opcja 1</option>
	<option>Opcja 2</option>
	<option>Opcja 3</option>
	</select>
</form>
otrzymamy formularz, w którym zaznaczone pola mają dodatkowy margines z lewej strony (aby to sprawdzić zmień zaznaczenie wybranych kontrolek):

Zaznaczona opcja listy rozwijalnej (ostatnia z powyższych kontrolek) będzie wyróżniona najprawdopodobniej tylko w przeglądarce Firefox.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:checked1
2008-12-11
1
2004-11-09
12
2015-07-29
9
2006-06-20
3.1
2008-03-18
 100%

Domyślne :default

Jak zmienić wygląd domyślnego przycisku formularza lub domyślnej opcji do wyboru?

CSS 3

selektor:default { cecha: wartość }
Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej, a także przyciski [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Niektóre elementy formularza mogą oznaczać domyślną akcję. Na przykład przycisk wysłania formularza powinien być domyślnym. Mimo iż w formularzu może się również znajdować przycisk czyszczenia danych, po wciśnięciu klawisza Enter w dowolnym polu tekstowym, formularz zostanie wysłany, a nie wyczyszczony. Podobnie grupa pól opcji, pola wyboru czy menu rozwijalne mogą mieć zaznaczone pewne opcje. Jeśli wyślemy formularz bez dokonywania w nim zmian, opcje domyślnie zaznaczone zostaną z nim wysłane. Przedstawiony tutaj selektor pozwala w dowolny sposób wyróżnić takie domyślne elementy. Dzięki temu jeśli użytkownik wybierze inną opcję, zawsze będzie widział, która była opcją domyślą, aby ewentualnie do niej wrócić.

Przykład :default

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

input:default, option:default, button:default { margin-left: 30px }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<form action="?">
	<fieldset>
	<input type="radio" checked name="pole_opcji" class="przyklad_domyslne">
	<input type="radio" name="pole_opcji" class="przyklad_domyslne">
	</fieldset>
	<select size="3">
	<option selected class="przyklad_domyslne">Opcja 1</option>
	<option class="przyklad_domyslne">Opcja 2</option>
	<option class="przyklad_domyslne">Opcja 3</option>
	</select>
	<div>
	<button type="submit">Wyślij</button>
	<button type="reset">Wyczyść</button>
	</div>
</form>
otrzymamy formularz, w którym domyślne kontrolki mają dodatkowy margines z lewej strony:

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:default10
2011-03-08
4
2011-03-22
79
2020-01-15
10
2009-09-01
5
2010-06-07
 100%

Pusty element :empty

W jaki sposób zmienić sposób formatowania elementów, które nie zawierają żadnej treści?

CSS 3

selektor:empty { cecha: wartość }
Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Zdarza się, że w dokumencie HTML znajdują się elementy, które nie zawierają żadnej treści, ani dzieci. Możemy mieć z tym do czynienia w przypadku elementów, które z definicji nie posiadają znacznika zamykającego (BR, HR, IMG, INPUT), ale również gdy po prostu nie wstawimy do znacznika żadnej treści. Dzięki opisywanemu tutaj selektorowi można nadać takim elementom odrębne formatowanie.

Wstawianie pustych znaczników do kodu źródłowego nie ma wielkiego sensu semantycznego, ponieważ ich przeznaczeniem jest oznaczanie treści.

Przykład :empty

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

p:empty { background-color: red; width: 100%; height: 1em }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<p></p>
<p> </p>
<p><b></b></p>
<p>To jest akapit</p>
otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego:

To jest akapit

Zwróć uwagę, że drugi akapit (zawierający tylko spację) ani trzeci akapit (zawierający tylko pusty element-dziecko), nie otrzymały zmienionego formatowania.


Przykład z użyciem elementu, który nie posiada znacznika zamykającego:

📋 Zaznacz kod ▶ Edytuj na żywo

img:empty { border: 1px solid red }
To jest pusty element

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:empty1
2008-12-11
1
2004-11-09
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%

Korzeń :root

W jaki sposób za pomocą CSS odnieść się do korzenia drzewa dokumentu?

CSS 3

:root { cecha: wartość }
Wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Każdy dokument HTML ma w drzewie dokumentu dokładnie jeden korzeń, tzn. element najbardziej nadrzędny, który nie ma żadnego rodzica, za to zawiera w sobie (bezpośrednio lub poprzez zagnieżdżenie) wszystkie inne elementy dokumentu. W języku HTML korzeniem jest zawsze element HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ ten sam efekt uzyskamy poprzez użycie najprostszego selektora typu:

📋 Zaznacz kod

html { cecha: wartość }

Nie zapominajmy jednak, że CSS nadaje się do stylizowania również dokumentów XML, gdzie nie ma żadnego wymogu co do nazwy elementu-korzenia.

Przykład :root

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

:root p { color: red }
a w dowolnym miejscu strony:

📋 Zaznacz kod ▶ Edytuj na żywo

<p>To jest akapit</p>
powinniśmy otrzymać tekst koloru czerwonego:

To jest akapit

Pytania i odpowiedzi :root

Co to jest "root" w CSS?

W CSS termin root odnosi się do głównego elementu struktury dokumentu, czyli do korzenia drzewa dokumentu. Jest to punkt wyjścia dla stylów CSS, które mogą być zastosowane do całej strony.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:root1
2008-12-11
1
2004-11-09
12
2015-07-29
9.5
2008-06-12
1
2003-06-23
 100%

Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type

Jak zmienić wygląd parzystych lub nieparzystych wierszy tabeli? Jak pokolorować co trzeci wiersz?

Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type #

CSS 3

  1. Dzieci:
    dziecko:nth-child(cykl)
    rodzic > dziecko:nth-child(cykl)
  2. Dzieci - począwszy od ostatniego:
    dziecko:nth-last-child(cykl)
    rodzic > dziecko:nth-last-child(cykl)
  3. Elementy wybranego typu:
    selektor:nth-of-type(cykl)
    rodzic > dziecko:nth-of-type(cykl)
  4. Elementy wybranego typu - począwszy od ostatniego:
    selektor:nth-last-of-type(cykl)
    rodzic > dziecko:nth-last-of-type(cykl)
Selektorem, rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów].
Cykl określa sposób powtarzania elementów:
An+B
An
B
(dla n≥0 - liczba naturalna z zerem) gdzie A (okres) i B (przesunięcie początkowe) są liczbami całkowitymi (mogą być dodatnie, ujemne lub wynosić zero) - zobacz szczegółowe wyjaśnienie dalej
odd
elementy nieparzyste (to samo co: 2n+1)
even
elementy parzyste (to samo co: 2n)
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

W celu poprawienia czytelności danych, często spotyka się obszerne tabele, w których kolejne nieparzyste wiersze są pokolorowane w odmienny sposób niż parzyste. Taki rodzaj formatowania można oczywiście uzyskać dodając co drugiemu wierszowi odpowiednią klasę. Gdy jednak wierszy jest sporo, zaczyna to być niewygodne. A co jeśli jutro zażyczymy sobie inny sposób kolorowania wierszy tej tabeli - w cyklu co trzy, a nie co dwa elementy? Dzięki przedstawionym tutaj selektorom można to uzyskać bez najmniejszego trudu.

Cykl #

Aby wyznaczyć przebieg cyklu, musimy najpierw ponumerować (w myślach) kolejne elementy (np. wiersze tabeli). Numerację rozpoczynamy od liczby jeden (a nie jak w wielu językach programowania od zera). W ten sposób pierwszy wiersz będzie oznaczony indeksem nieparzystym, drugi parzystym, trzeci znów nieparzystym itd. W tym kontekście cykle w postaci odd (nieparzyste) oraz even (parzyste) są chyba dość jasne. Mniej oczywiste może być wykorzystanie tajemniczych wzorów: An+B itp. W celu wyznaczenia cyklu za pomocą wzoru najpierw podstawiamy pod wielkości A i B liczby całkowite (dodatnie, ujemne lub zero) - przyjmijmy dla przykładu wzór: 2n+1 (wprost w takiej postaci należy wpisać go do selektora). Teraz, kiedy znamy już konkretną postać wzoru, zaczynamy podstawiać do niego pod n kolejne liczby naturalne rozpoczynając od zera, a wynik całego wyrażenia określi kolejne numery wierszy, które otrzymają podany sposób formatowania:

A=2, B=1
nwzórwynik
02*0+11
12*1+13
22*2+15
itd.

Okres #

Wartość A określa okres cyklu, czyli długość "skoku" pomiędzy kolejnymi elementami wybieranymi przez selektor. Podstawiając A=3 pokolorowany zostanie co trzeci wiersz, przy A=4 - co czwarty itd. Podając ujemną wartość możemy poruszać się w tył. Natomiast podstawiając wartość zero (lub pomijając w ogóle człon An we wzorze), wybierzemy co najwyżej jeden element - o numerze wskazanym przez wartość B.

Przesuniecie początkowe #

Wartość B odpowiada za przesunięcie początkowe, tzn. od którego numeru elementu selektor zaczyna działać. Podając B=2 kolorowanie zostanie rozpoczęte od drugiego wiersza (wcześniejsze zostaną pominięte), przy B=3 - od trzeciego itd. Możliwe jest również wstawienie liczby ujemnej, co spowoduje rozpoczęcie odliczania jeszcze zanim rozpoczną się widoczne elementy listy, przy czym jeśli wynik po podstawieniu otrzymamy mniejszy lub równy zero, nie będzie to miało żadnego widocznego skutku. Podstawienie wartości B=0 po prostu rozpocznie odliczanie od elementu zerowego, przy czym widoczne skutki możemy zobaczyć dopiero przy drugim przebiegu cyklu, gdyż element zero nie istnieje.

Odwrotna kolejność #

Wszystkie powyższe rozważania są słuszne dla selektora :nth-child oraz :nth-of-type. Pierwszy z nich wybiera dzieci, a drugi elementy podanego typu [porównaj: pierwsze dziecko i pseudoklasy typu]. Natomiast w przypadku selektorów :nth-last-child oraz :nth-last-of-type sposób wyliczania przebiegu cyklu jest analogiczny, ale numerowanie elementów rozpoczynamy nie od pierwszego, lecz od ostatniego i posuwamy się do tyłu. Czyli ostatni element oznaczymy indeksem jeden, przedostatni - dwa itd.

Zapis #

Gdy A=1 lub A=-1 wpisywanie liczby przed n można pominąć:

📋 Zaznacz kod

selektor:nth-child(-n) { cecha: wartość }

Jawne oznaczanie liczby A dodatnim znakiem nie jest wymagane, ale można to zrobić:

📋 Zaznacz kod

selektor:nth-child(+2n) { cecha: wartość }

Białe znaki (np. spacje) są dozwolone po otworzeniu i przed zamknięciem nawiasu selektora:

📋 Zaznacz kod

selektor:nth-child( odd ) { cecha: wartość }

Można je również wstawiać przed i po znaku sumy bądź różnicy we wzorze:

📋 Zaznacz kod

selektor:nth-child(-2n + 10) { cecha: wartość }

Białe znaki są jednak niedozwolone po symbolach oznaczających znak liczby. Nie można również rozdzielać nimi n od poprzedzającej liczby ani znaku:

📋 Zaznacz kod

/* Niepoprawnie: */
selektor:nth-child(- 2 n) { cecha: wartość }

Wartości B nie można oznaczać ujemnym znakiem - w takim przypadku trzeba po prostu zamienić działanie sumy na różnicę:

📋 Zaznacz kod

/* Niepoprawnie: */
selektor:nth-child(2n + -1) { cecha: wartość }
/* Poprawnie: */
selektor:nth-child(2n - 1) { cecha: wartość }

Przykład :nth-child :nth-last-child :nth-of-type :nth-last-of-type

Nieparzyste i parzyste wiersze:

📋 Zaznacz kod ▶ Edytuj na żywo

tbody > tr:nth-child(odd) { color: white; background-color: gray } /* biały na szarym */
tbody > tr:nth-child(even) { color: gray; background-color: white } /* szary na białym */
Komórka 1.1Komórka 1.2
Komórka 2.1Komórka 2.2
Komórka 3.1Komórka 3.2
Komórka 4.1Komórka 4.2
Komórka 5.1Komórka 5.2
Komórka 6.1Komórka 6.2

Co trzecie wiersze:

📋 Zaznacz kod ▶ Edytuj na żywo

tbody > tr:nth-child(3n+1) { color: yellow; background-color: red } /* żółty na czerwonym */
tbody > tr:nth-child(3n+2) { color: maroon; background-color: orange } /* kasztanowy na pomarańczowym */
tbody > tr:nth-child(3n+3) { color: red; background-color: yellow } /* czerwony na żółtym */
Komórka 1.1Komórka 1.2
Komórka 2.1Komórka 2.2
Komórka 3.1Komórka 3.2
Komórka 4.1Komórka 4.2
Komórka 5.1Komórka 5.2
Komórka 6.1Komórka 6.2

Co drugi wiersz poczynając od trzeciego:

📋 Zaznacz kod ▶ Edytuj na żywo

tbody > tr:nth-child(2n+3) { color: white; background-color: gray }
Komórka 1.1Komórka 1.2
Komórka 2.1Komórka 2.2
Komórka 3.1Komórka 3.2
Komórka 4.1Komórka 4.2
Komórka 5.1Komórka 5.2
Komórka 6.1Komórka 6.2

Co trzeci wiersz poczynając od -1 (wiersze -1 i 0 w rzeczywistości nie istnieją):

📋 Zaznacz kod ▶ Edytuj na żywo

tbody > tr:nth-child(3n-1) { color: white; background-color: gray }
Komórka 1.1Komórka 1.2
Komórka 2.1Komórka 2.2
Komórka 3.1Komórka 3.2
Komórka 4.1Komórka 4.2
Komórka 5.1Komórka 5.2
Komórka 6.1Komórka 6.2

Co drugi wiersz odliczając do tyłu poczynając od czwartego:

📋 Zaznacz kod ▶ Edytuj na żywo

tbody > tr:nth-child(-2n+4) { color: white; background-color: gray }
Komórka 1.1Komórka 1.2
Komórka 2.1Komórka 2.2
Komórka 3.1Komórka 3.2
Komórka 4.1Komórka 4.2
Komórka 5.1Komórka 5.2
Komórka 6.1Komórka 6.2

Trzeci wiersz:

📋 Zaznacz kod ▶ Edytuj na żywo

tbody > tr:nth-child(3) { color: white; background-color: gray }
Komórka 1.1Komórka 1.2
Komórka 2.1Komórka 2.2
Komórka 3.1Komórka 3.2
Komórka 4.1Komórka 4.2
Komórka 5.1Komórka 5.2
Komórka 6.1Komórka 6.2

Nieparzyste definicje listy:

📋 Zaznacz kod ▶ Edytuj na żywo

dl > dd:nth-of-type(odd) { font-weight: bold }
Termin 1
Definicja 1
Termin 2
Definicja 2
Termin 3
Definicja 3
Termin 4
Definicja 4
Termin 5
Definicja 5
Termin 6
Definicja 6

Nieparzyste wiersze poczynając od końca:

📋 Zaznacz kod ▶ Edytuj na żywo

tbody > tr:nth-last-child(odd) { color: white; background-color: gray }
Komórka 1.1Komórka 1.2
Komórka 2.1Komórka 2.2
Komórka 3.1Komórka 3.2
Komórka 4.1Komórka 4.2
Komórka 5.1Komórka 5.2
Komórka 6.1Komórka 6.2

Pytania i odpowiedzi :nth-child, :nth-of-type

Co drugie dziecko CSS?

Aby wybrać co drugie dziecko dowolnego elementu HTML za pomocą CSS, możemy użyć selektora :nth-child(2n). Na przykład, jeśli mamy listę <ul> z elementami <li>, to selektor ul > li:nth-child(2n) zastosowany do niej wybierze wszystkie elementy <li>, które są na pozycjach parzystych.

Jaka jest różnica między selektorami :NTH-OF-TYPE i :NTH-CHILD?

Oba te selektory CSS dopasowują elementy znajdujące się na tym samym poziomie drzewa dokumentu. Jednak :nth-of-type(...) wymaga dodatkowo, aby znajdowała się tam przynajmniej podana liczba elementów o takiej samej nazwie (mogą być przedzielone również innymi elementami), natomiast :nth-child(...) wybiera po prostu element o podanej kolejności. Na przykład, jeśli mamy: <p>...</p> <p>...</p> <div>...</div> <p>...</p>, to :nth-of-type(3) wybierze ostatni element <p> (trzeci akapit), a :nth-child(3) dopasuje element <div> (trzecie dziecko).

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:nth-child1
2008-12-11
3.5
2009-06-30
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%
:nth-last-child4
2010-01-25
3.5
2009-06-30
12
2015-07-29
9
2006-06-20
3.1
2008-03-18
 100%
:nth-of-type1
2008-12-11
3.5
2009-06-30
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%
:nth-last-of-type4
2010-01-25
3.5
2009-06-30
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%

Negacja :not

W jaki sposób zmienić wygląd wszystkich elementów z wyjątkiem podanych?

CSS 3

selektor:not(argument) { cecha: wartość }
Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów].
Argument to jeden z selektorów: typu, uniwersalny, atrybutu, klasy/identyfikatora albo dowolna pseuoklasa (z wyjątkiem samej pseudoklasy negacji).
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Wyobraźmy sobie sytuację, kiedy chcemy zmienić kolor całego tekstu na stronie z wyjątkiem np. tabelek. Moglibyśmy to zrobić, przypisując najpierw określony kolor całemu tekstowi, a następnie przywracając kolor domyślny wszystkim tabelom. Łatwiej będzie jednak takie działanie połączyć w pojedynczym selektorze negacji. Jeszcze ciekawsze efekty możemy uzyskać poprzez połączenie negacji z bardziej złożonymi selektorami - np. pokolorować wszystkie wiersze tabeli z wyjątkiem jednego, który podamy za pomocą pseudoklasy podstawionej jako argument negacji.

Selektorów negacji nie wolno zagnieżdżać, tzn. wstawiać jeden jako argument drugiego.

Przykład :not

Po wpisaniu w arkuszu stylów:

📋 Zaznacz kod ▶ Edytuj na żywo

ul > li:not(:first-child) { font-weight: bold }
otrzymamy wykaz, w którym wszystkie punkty z wyjątkiem pierwszego (pierwsze dziecko) powinny być pogrubione:
  • Punkt 1
  • Punkt 2
  • Punkt 3

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
:not1
2008-12-11
1
2004-11-09
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18
 100%

Łączenie selektorów

W jaki sposób połączyć kilka selektorów w jednej regule stylów CSS? Jak zmienić obramowanie obrazka po wskazaniu myszką? Jak dodać ciekawie wyglądający tekst po wskazaniu myszką?

Na koniec warto wspomnieć o jeszcze jednej przydatnej własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności:

  1. selektor typu lub selektor uniwersalny
  2. selektory atrybutów, selektor identyfikatora, selektor klasy lub selektory pseudoklas (w dowolnej kolejności)
  3. selektory pseudoelementów

Zespół selektorów z punktu 1 i 2 nazywamy selektorem prostym. W jednej regule może wystąpić kilka selektorów prostych - każdy rozdzielony przez tzw. kombinator, tj. znaki spacji, ">" lub "+", które są wykorzystywane przy tworzeniu selektorów: potomka, dziecka i braci. Selektor pseudoelementów może się znajdować tylko za ostatnim selektorem prostym w regule stylu.

Przykład

📋 Zaznacz kod ▶ Edytuj na żywo

a.przyklad_selektory:hover { font-weight: bold }
Taka reguła kojarzy każdy element typu a (czyli odsyłacz), który będzie posiadał klasę class="przyklad_selektory", kiedy zostanie on wskazany myszką:

Wskaż ten odsyłacz myszką: class="przyklad_selektory". A tutaj jest odsyłacz bez klasy.

Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydatny, ponieważ zwykle chcemy część odnośników na stronie wystylizować inaczej, jeżeli chodzi o ich podświetlanie po wskazaniu myszką. Mogą to być np. linki z menu, które powinny wyglądać inaczej niż normalne hiperłącza w tekście. Jeżeli jednak chcemy zmienić wygląd wszystkich odsyłaczy znajdujących się w jednym miejscu - np. w menu serwisu - wygodniej jest użyć następującej reguły:

📋 Zaznacz kod ▶ Edytuj na żywo

.przyklad_selektory2 a:hover { font-weight: bold }

Teraz wystarczy wstawić:

📋 Zaznacz kod ▶ Edytuj na żywo

<div class="przyklad_selektory2">
	<a href="?">Link1</a>
	<a href="?">Link2</a>
	<a href="?">Link3</a>
</div>

aby zmienić wygląd po wskazaniu wszystkich odsyłaczy z tego bloku, bez wpływu na pozostałe znajdujące się na stronie:


Zmiana koloru obramowania obrazka po wskazaniu go myszką:

📋 Zaznacz kod ▶ Edytuj na żywo

img.przyklad_selektory3 { border: 5px solid black }
a:hover img.przyklad_selektory3 { border: 5px solid red }

Wskaż poniższy obrazek myszką:

class="przyklad_selektory3"

Inny ciekawy przykład - tym razem z automatycznym generowaniem zawartości:

📋 Zaznacz kod ▶ Edytuj na żywo

a.przyklad_selektory4:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px }

Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz za nim nowy element z napisem "Rollover".


A oto bardziej zaawansowany przykład:

📋 Zaznacz kod ▶ Edytuj na żywo

div.przyklad_selektory5 > ul:first-child[dir="ltr"]:lang(pl) + p[title]:first-letter { color: red; font-weight: bold; font-size: larger }
To jest blok, który posiada klasę class="przyklad_selektory5"...
  • To jest wykaz, który znajduje się wewnątrz bloku zaraz na jego początku, a zatem jest jego pierwszym dzieckiem.
  • Wykaz posiada atrybuty: dir="ltr" lang="pl"
...ciąg dalszy bloku...

To jest akapit, czyli brat wykazu, który posiada przypisany atrybut title. Pierwsza litera w tym akapicie powinna być zmodyfikowany przez regułę stylów.

...i tutaj kończy się blok.

W powyższej regule stylów możemy wyróżnić następujące selektory proste:

  • div.przyklad_selektory5
  • ul:first-child[dir="ltr"]:lang(pl)
  • p[title]:first-letter

Szczegółowość selektorów

Jak określić ważność różnych selektorów w tym samym arkuszu stylów, odnoszących się do tych samych elementów i własności?

Sposób formatowania każdego elementu strony może być określony w kilku miejscach. O tym, jak ostatecznie będzie wyglądał wybrany element, decydują zasady kaskadowości stylów. Pozostaje jeszcze określenie ważności reguł stylów, znajdujących się w tym samym arkuszu CSS. Panuje tutaj dość intuicyjna zasada mówiąca, że bardziej szczegółowe selektory są ważniejsze.

  1. Selektory identyfikatora mają pierwszeństwo przed innymi, nawet jeśli znajdują się na początku arkusza CSS. Im więcej identyfikatorów zawiera selektor, tym jest bardziej szczegółowy, a więc ważniejszy.

    Przykład

    Tekst przedstawionego poniżej akapitu będzie czerwony (red):

    📋 Zaznacz kod ▶ Edytuj na żywo

    <div id="kontener">
    	<p id="identyfikator">...</p>
    </div>

    📋 Zaznacz kod ▶ Edytuj na żywo

    div#kontener p#identyfikator { color: red }
    p#identyfikator { color: green }
    p { color: black }
  2. Gdy rozpatrywane selektory nie zawierają żadnych identyfikatorów albo zawierają ich tyle samo, o ważności decyduje liczba użytych w regule klas, pseudoklas oraz atrybutów.

    Przykład

    Tekst przedstawionego poniżej akapitu będzie czerwony (red):

    📋 Zaznacz kod ▶ Edytuj na żywo

    <p class="klasa">...</p>

    📋 Zaznacz kod ▶ Edytuj na żywo

    p.klasa { color: red }
    p { color: black }
  3. Gdy w rozpatrywanych selektorach zarówno liczba identyfikatorów jak i klas, pseudoklas oraz atrybutów jest identyczna, bardziej szczegółowy (ważniejszy) jest selektor, który posiada więcej elementów lub pseudoelementów.

    Przykład

    Tekst przedstawionego poniżej akapitu będzie czerwony (red):

    📋 Zaznacz kod ▶ Edytuj na żywo

    <div>
    	<p>...</p>
    </div>

    📋 Zaznacz kod ▶ Edytuj na żywo

    div p { color: red }
    p { color: black }
  4. Gdy żaden z powyższych punktów nie pozwala określić, który selektor jest bardziej szczegółowy, ważniejsze będą te deklaracje, które zostaną umieszczone na końcu.

    Przykład

    Tekst, określonego poniżej akapitu, będzie czerwony (red):

    📋 Zaznacz kod ▶ Edytuj na żywo

    p { color: black }
    p { color: green; color: red }

Przykład

Tekst przedstawionego poniżej akapitu będzie czerwony (red):

📋 Zaznacz kod ▶ Edytuj na żywo

<div id="kontener">
	<p class="klasa">...</p>
</div>

📋 Zaznacz kod ▶ Edytuj na żywo

div#kontener p.klasa { color: lime }
div#kontener p.klasa { color: yellow; color: red }
#kontener p.klasa { color: green }
div#kontener p { color: olive }
#kontener p { color: teal }
div p.klasa { color: aqua }
p.klasa { color: blue }
.klasa { color: navy }
div p { color: purple }
p { color: fuchsia }
* { color: black }

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Jak zmienić wygląd odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

Jak wstawić odsyłacz?

Odsyłacz w HTML wstawiamy za pomocą znacznika <a href="...">...</a>, gdzie atrybut href="..." określa adres docelowy. Na przykład: <a href="https://www.example.com">Tekst odsyłacza</a>.

Zobacz więcej...

Jaki kolor ma link?

Domyślnie linki są niebieskie (kolor #0000FF czyli blue), a odwiedzone linki są fioletowe (kolor #800080 czyli purple).

Zobacz więcej...

Zobacz więcej...

Zobacz więcej...

Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

Jak zmienić kolor linku po najechaniu CSS?

Aby zmienić kolor linku po najechaniu myszką, można wykorzystać pseudoklasę :hover w CSS. Na przykład: a:hover { color: green; }. To spowoduje, że kolor linku zmieni się na zielony, gdy użytkownik najedzie na niego myszką.

Zobacz więcej...

Co znaczy :HOVER w CSS?

:hover to pseudoklasa w CSS, która jest aktywowana, gdy użytkownik najedzie na element myszką. Można ją wykorzystać do definiowania stylów dla efektów wizualnych podczas interakcji z elementami, takimi jak zmiana koloru linku po najechaniu.

Zobacz więcej...

W jaki sposób za pomocą CSS odnieść się do korzenia drzewa dokumentu?

Co to jest "root" w CSS?

W CSS termin root odnosi się do głównego elementu struktury dokumentu, czyli do korzenia drzewa dokumentu. Jest to punkt wyjścia dla stylów CSS, które mogą być zastosowane do całej strony.

Zobacz więcej...

Zobacz więcej...

Jak zmienić wygląd parzystych lub nieparzystych wierszy tabeli? Jak pokolorować co trzeci wiersz?

Co drugie dziecko CSS?

Aby wybrać co drugie dziecko dowolnego elementu HTML za pomocą CSS, możemy użyć selektora :nth-child(2n). Na przykład, jeśli mamy listę <ul> z elementami <li>, to selektor ul > li:nth-child(2n) zastosowany do niej wybierze wszystkie elementy <li>, które są na pozycjach parzystych.

Zobacz więcej...

Jaka jest różnica między selektorami :NTH-OF-TYPE i :NTH-CHILD?

Oba te selektory CSS dopasowują elementy znajdujące się na tym samym poziomie drzewa dokumentu. Jednak :nth-of-type(...) wymaga dodatkowo, aby znajdowała się tam przynajmniej podana liczba elementów o takiej samej nazwie (mogą być przedzielone również innymi elementami), natomiast :nth-child(...) wybiera po prostu element o podanej kolejności. Na przykład, jeśli mamy: <p>...</p> <p>...</p> <div>...</div> <p>...</p>, to :nth-of-type(3) wybierze ostatni element <p> (trzeci akapit), a :nth-child(3) dopasuje element <div> (trzecie dziecko).

Zobacz więcej...

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak zmienić wygląd odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

a:link { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd odwiedzonych odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

a:visited { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd aktywnych elementów - np. odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

selektor:active { cecha: wartość }

Zobacz więcej...

Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

selektor:hover { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pola tekstowego formularza po wybraniu przez użytkownika?

selektor:focus { cecha: wartość }

Zobacz więcej...

W jaki sposób zmienić wygląd elementów, zawierających tekst w wybranym języku?

selektor:lang(język) { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pierwszego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

dziecko:first-child { cecha: wartość }
rodzic > dziecko:first-child { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd ostatniego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

dziecko:last-child { cecha: wartość }
rodzic > dziecko:last-child { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd elementu dziecka, który nie ma braci?

dziecko:only-child { cecha: wartość }
rodzic > dziecko:only-child { cecha: wartość }

Zobacz więcej...

W jaki sposób zmienić wygląd tylko pierwszego elementu określonego typu?

selektor:first-of-type { cecha: wartość }
rodzic > dziecko:first-of-type { cecha: wartość }
selektor:last-of-type { cecha: wartość }
rodzic > dziecko:last-of-type { cecha: wartość }
selektor:only-of-type { cecha: wartość }
rodzic > dziecko:only-of-type { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?

selektor:target { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane (wyszarzone)?

selektor:disabled { cecha: wartość }
selektor:enabled { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane do zapisu?

selektor:read-only { cecha: wartość }
selektor:read-write { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zaznaczone?

selektor:checked { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd domyślnego przycisku formularza lub domyślnej opcji do wyboru?

selektor:default { cecha: wartość }

Zobacz więcej...

W jaki sposób zmienić sposób formatowania elementów, które nie zawierają żadnej treści?

selektor:empty { cecha: wartość }

Zobacz więcej...

W jaki sposób za pomocą CSS odnieść się do korzenia drzewa dokumentu?

:root { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd parzystych lub nieparzystych wierszy tabeli? Jak pokolorować co trzeci wiersz?

dziecko:nth-child(cykl)
rodzic > dziecko:nth-child(cykl)
dziecko:nth-last-child(cykl)
rodzic > dziecko:nth-last-child(cykl)
selektor:nth-of-type(cykl)
rodzic > dziecko:nth-of-type(cykl)
selektor:nth-last-of-type(cykl)
rodzic > dziecko:nth-last-of-type(cykl)

Zobacz więcej...

W jaki sposób zmienić wygląd wszystkich elementów z wyjątkiem podanych?

selektor:not(argument) { cecha: wartość }

Zobacz więcej...

Facebook