Pseudoluokka empty

Pseudoluokka empty määrittää miltä tyhjä elementti (ei sisällä tekstiä) näyttää.

Syntaksi

cssvalitsija:empty {
  
}

Esimerkki

Tässä esimerkissä viimeinen li on tyhjä, mutta sillä on silti merkki:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li></li>
</ul>

Результат:

Esimerkki

Muutetaan tyhjän li-tagin käyttäytymistä:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li></li>
</ul>

cssli:empty {
  border: 1px solid blue;
  list-style-type: circle;
  color: blue;
  width: 100px;
}

Результат:

Esimerkki

Piilotetaan tyhjät li kokonaan:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li></li>
</ul>

cssli:empty {
  display: none;
}

Результат:

Katso myös