Pseudoluokka empty
Pseudoluokka empty määrittää miltä
tyhjä elementti (ei sisällä tekstiä) näyttää.
Syntaksi
valitsija:empty {
}
Esimerkki
Tässä esimerkissä viimeinen li on tyhjä,
mutta sillä on silti merkki:
<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ä:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li></li>
</ul>
li:empty {
border: 1px solid blue;
list-style-type: circle;
color: blue;
width: 100px;
}
:
Esimerkki
Piilotetaan tyhjät li kokonaan:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li></li>
</ul>
li:empty {
display: none;
}
:
Katso myös
-
ominaisuus
empty-cells,
joka kertoo selaimelle kuinka näyttää taustan ja reunuksen tyhjissä taulukon soluissa
