Ostatnio edytowany:

:only-of-type

Autor: Virtual Patriot

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.

Dodatkowe techniczne informacje 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 "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"


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

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"

Interpretacja selektora :only-of-type

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji selektora .