Autor publikacji: Virtual Patriot - Administrator

:empty

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Grudzień 28 2024

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

Przeznaczenie selektora `:empty`

      :empty { ... }

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

Cechy elementu HTML spełniają zasadę pseudoklasy :empty, gdy w danym momencie dany element HTML nie posiada w swojej zawartości żadnej rzeczy (komentarz języka HTML jest ignorowany przez przeglądarkę internetową, natomiast białe znaki nie).

Informacje techniczne o selektorze `:empty`

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

Przykładowa reguła CSS, selektor `:empty`

p:empty {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:empty { background-color:red; }

p:empty: do każdego elementu p, który nie posiada w swojej zawartości żadnej rzeczy
background-color: dodaj właściwość CSS, która zmieni kolor tła 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 {
        padding:1em;
        border:3px solid black;
      }

      p:empty {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <p>to jest pierwszy przykładowy element "p"</p>

    <p></p>

    <p>    </p>

    <p><!-- to jest czwarty przykładowy element "p" --></p>

  </body>
</html>

Rezultat

to jest pierwszy przykładowy element "p"

- pierwszy przykładowy element "p" posiada w swojej zawartości ciąg znaków "to jest pierwszy przykładowy element p"

- drugi przykładowy element "p" nie posiada w swojej zawartości żadnej rzeczy, dlatego kolor tła wspomnianego elementu "p" jest czerwony

- trzeci przykładowy element "p" posiada w swojej zawartości kilka białych znaków

- czwarty przykładowy element "p" traktowany jest przez przeglądarkę internetową jako element HTML nieposiadający w swojej zawartości żadnej rzeczy (komentarz języka HTML jest ignorowany), dlatego kolor tła wspomnianego elementu "p" jest czerwony

Interpretacja selektora `:empty`

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

Zobacz więcej informacji o interpretacji selektora :empty.