<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS: 15 simple tests of :empty</title>

<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>

<link rel="help" href="https://drafts.csswg.org/selectors-3/#empty-pseudo"/>

<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-empty-pseudo"/>

<link rel="match" href="selectors-empty-001-ref.xml"/>

<meta name="flags" content="nonHTML"/>

<style type="text/css">

tests, tests * {

display: block;

}

tests > * {

border: solid thick red;

height: 1em;

padding: 4px;

margin: 4px;

color: white;

}

tests[type=positive] > :empty, tests[type=negative] > :not(:empty) {

border: solid thick lime;

}

</style>

</head>

<body>

<p>Below there should be fifteen big green boxes and no red.</p>

<tests xmlns="http://www.example.org/" type="positive">

<test1/>

<test2></test2>

<test3><!-- --></test3>

<test4><?testfour?></test4>

<test5 title="data"></test5>

</tests>

<tests xmlns="http://www.example.org/" type="negative">

<test1><test1> </test1></test1>

<test2>green!</test2>

<test3>&gt;&lt;</test3>

<test4>&#x2211;</test4>

<test5><test5/></test5>

<test6> </test6>

<test7> <!-- --></test7>

<test8> <?testfour?></test8>

<test9><!-- --> </test9>

<test10><?testfour?> </test10>

</tests>

</body>

</html>