11. :only-child - CSS3

Przeznaczenie selektora `:only-child`

:only-child { ... }

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

Cechy elementu HTML spełniają zasadę pseudoklasy :only-child, gdy w danym momencie dany element HTML jest jedynym elementem dzieckiem swojego elementu rodzica.

Informacje techniczne o selektorze `:only-child`

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

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

p:only-child {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

p:only-child { color:red; }

p:only-child

do każdego elementu p, który jest jedynym elementem dzieckiem swojego 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>Kurs CSS</title>

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

  <body>

    <div>
      <p>
        tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest jedynym elementem dzieckiem swojego elementu rodzica
      </p>
    </div>

    <hr>

    <div>
      <div>
        tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element "div" nie jest jedynym elementem dzieckiem swojego elementu rodzica oraz nie jest elementem "p"
      </div>

      <p>
        tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest jedynym elementem dzieckiem swojego elementu rodzica, lecz jest kolejnym
      </p>
    </div>

  </body>
</html>

Rezultat

Interpretacja selektora `:only-child`

Previous10. :last-child - CSS3 Next12. :first-of-type - CSS3

Last updated 1 month ago

hashtagPrzeznaczenie selektora :only-child

hashtagInformacje techniczne o selektorze :only-child

hashtagPrzykładowa reguła CSS, selektor :only-child

hashtagWyjaśnienie przykładowej reguły CSS

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

hashtagRezultat

hashtagInterpretacja selektora :only-child