Selektory pseudoklas

Pseudoklasy typu

(CSS 3 - Internet Explorer 9, interpretuje Firefox 3, Opera, Chrome)

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ść }

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.

Nie obsługuje MSIE 8.0 ani Firefox 2!

Przykład:

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 */

<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>

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.

• Jedyne dziecko
• Etykieta

• Do góry
• Strona główna
• Drukuj rozdział
• Komentarze