Autor publikacji: Virtual Patriot - Administrator

:only-of-type

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the :only-of-type pseudo-class (LV3)

Przeznaczenie selektora `:only-of-type`

      :only-of-type { ... }

Selektor :only-of-type odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :only-of-type.

Cechy elementu HTML spełniają zasadę pseudoklasy :only-of-type, gdy w danym momencie dany element HTML jest jedynym elementem swojego typu względem ewentualnych pozostałych elementów dzieci należących do wspólnego elementu rodzica.

Informacje techniczne o selektorze `:only-of-type`

ograniczenie - elementy HTML: brak
ograniczenie - właściwości CSS: brak

Przykładowa reguła CSS, selektor `:only-of-type`

p:only-of-type {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:only-of-type { color:red; }

p:only-of-type: do każdego elementu p, który jest jedynym elementem typu p względem pozostałych elementów dzieci należących do wspólnego elementu rodzica
color: dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
red: na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p:only-of-type {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      <p>
        tekst w tym elemencie "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch elementów typu "p"
      </p>

      <p>
        tekst w tym elemencie "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest drugim z dwóch elementów typu "p"
      </p>
    </div>

    <hr>

    <div>
      <div>
        tekst w tym elemencie "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch elementów typu "div"
      </div>

      <p>
        tekst w tym elemencie "p" jest koloru czerwonego, ponieważ ten element "p" jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica
      </p>

      <div>
        tekst w tym elemencie "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest drugim z dwóch elementów typu "div"
      </div>
    </div>

  </body>
</html>

Rezultat

tekst w tym elemencie "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch elementów typu "p"

tekst w tym elemencie "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch elementów typu "div"

tekst w tym elemencie "p" jest koloru czerwonego, ponieważ ten element "p" jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica

Interpretacja selektora `:only-of-type`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 9
: tak

Zobacz więcej informacji o interpretacji selektora :only-of-type.