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

Pierwszy element wybranego typu:

selektor:first-of-type { cecha: wartość }

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

Ostatni element wybranego typu:

selektor:last-of-type { cecha: wartość }

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

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:

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:

<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
`:first-of-type`	1 2008-12-11	3.5 2009-06-30	12 2015-07-29	9.5 2008-06-12	3.1 2008-03-18
`:last-of-type`	1 2008-12-11	3.5 2009-06-30	12 2015-07-29	9.5 2008-06-12	3.1 2008-03-18
`:only-of-type`	1 2008-12-11	3.5 2009-06-30	12 2015-07-29	9.5 2008-06-12	3.1 2008-03-18

Komentarze

Zobacz więcej komentarzy