Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - selektory pseudoklas

CSS3 - pseudoklasa :only-of-type

Email Drukuj PDF

Tematy: :first-of-type | :last-of-type | :only-of-type | :only-child | :nth-child | :nth-last-child | :nth-of-type | :nth-last-of-type | :last-child | :root | :empty | :target | :enabled | :disabled | :checked | :not

Pseudoklasa :only-of-type powoduje wyróżnienie tego elementu na stronie, który jest jedynym dzieckiem danego typu swojego rodzica w drzewie elementów.

Przykładowy kod:

p:only-of-type {background:beige;}

spowoduje, że w drugim bloku, zawierającym tylko jeden akapit, zostanie on wyróżniony zdefiniowanym w stylu formatowaniem (tłem w kolorze beige). W pierwszym bloku, gdzie są dwa akapity, żaden nie zostanie wyróżniony.

Pierwszy blok

To jest pierwszy akapit pierwszego bloku.

To jest drugi akapit pierwszego bloku

Drugi blok

To jest pierwszy akapit drugiego bloku.

Zauważ, że nawet gdyby w bloku, oprócz akapitu P był fragment objęty znacznikiem SPAN, to i tak akapit byłby wyróżniony, gdyż jest jedynym akapitem w bloku:

Trzeci blok

To jest pierwszy akapit trzeciego bloku.

To jest fragment objęty znacznikiem SPAN.

Przykładowy kod:

li:only-of-type {color:olive; font-weight:bold;}

spowoduje, że na drugiej liście, zawierającej tylko jeden element, zostanie on wyróżniony zdefiniowanym w stylu kolorem olive i pogrubieniem. Na pierwszej liście, gdzie są trzy punkty, żaden nie zostanie wyróżniony.

Pierwsza lista

  1. To jest pierwszy punkt pierwszej listy
  2. To jest drugi punkt pierwszej listy
  3. To jest trzeci punkt pierwszej listy

Druga lista

  1. To jest jedyny punkt drugiej listy

Interpretacja: Internet Explorer 9, Firefox, Opera, Chrome.

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V