Selektory#
Pseudokalsa elementu pustego#
:empty { /* deklaracje */ }Pseudoklasa :empty reprezentuje elementy, które w ogóle nie zawierają dzieci. W kontekście drzewa dokumentu jedynie węzły elementów oraz niektóre węzły treści (takie jak węzły tekstowe, węzły CDATA czy węzły referencyjnych encji), których dane tekstowe mają niezerową długość (włącznie ze znakami istotnymi dla procesu przetwarzania białych znaków), wpływają na utracenie stanu pustki; komentarze, instrukcje przetwarzania i inne węzły nie wpływają na to czy element uważany jest za pusty, czy też nie.
Powyższy opis pochodzi z ostatniej specyfikacji selektorów, ale i tak nie jest do końca precyzyjny. Najnowszy DOM4 eliminuje sporo węzłów, które nigdy nie zostały zaimplementowane w aktualnych programach (np. węzły referencyjnych encji), sekcje CDATA zastąpiono węzłami tekstowymi (czego żadna aktualna przeglądarka nie wprowadziła po dziś dzień). Opis zostanie zweryfikowany w niedalekiej przyszłości.
Z praktycznego punktu widzenia pseudoklasa :empty jest identyczna z pseudoklasą :blank, a jedyna różnica polega na tym, że dla :empty białe znaki w danych tekstowych są istotne. Zdecydowałem się na nieformalne określenia typu "pusty" i "czysty", żeby w jakiś sensowny sposób odróżnić od siebie te dwie pseudoklasy (nic innego nie przyszło mi do głowy).
Warto podkreślić, że elementy z natury puste (nazywane po prostu elementami pustymi) będą automatycznie pasowały do pseudoklasy :empty.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:empty {border: 5px solid red;}
</style>
</head>
<body>
<p>Elementy puste otrzymają czerwone obramowanie.</p> <!-- P - niepusty -->
<ol>
<li><p>Akapit z tekstem (jak wyżej).</li> <!-- 1. P - niepusty -->
<li><p></li> <!-- 2. P - pusty -->
<li><p></p></li> <!-- 3. P - pusty -->
<li><p><!-- Komentarz HTML --></p></li> <!-- 4. P - pusty -->
<li><p> <!-- Komentarz HTML --></p></li> <!-- 5. P - niepusty -->
<li><p> </p></li> <!-- 6. P - niepusty -->
<li><p> </p></li> <!-- 7. P - niepusty -->
<li><p><strong></strong></li> <!-- 8. P niepusty, ale STRONG pusty -->
<li><img src="" alt=""></li> <!-- 9. IMG pusty -->
<li><hr></li> <!-- 10. HR pusty -->
</ol>
</body>
</html>