-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
-\r
-<html>\r
- <head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />\r
- <title>:only-of-type</title>\r
- \r
- <style type='text/css'>\r
- <!--\r
-\r
- body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }\r
- pre { background: #fff; padding: 0.5em; }\r
- li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }\r
- .test { display: block; padding: 0.75em; }\r
- .base, .defaultgreen { background-color: #090; }\r
- .defaultred { background-color: #900; }\r
- \r
- .defaultred :only-of-type {\r
- background-color: #090;\r
- }\r
-\r
- .defaultgreen :only-of-type {\r
- background-color: #900;\r
- }\r
- \r
- blockquote {\r
- margin: 0;\r
- }\r
-\r
- --> \r
- </style> \r
- </head>\r
-\r
- <body>\r
- <p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p>\r
- \r
- <div class='base'></div>\r
- \r
- <ol>\r
- <li>\r
- <div class='defaultred'>\r
- <div class='test required'></div>\r
- </div>\r
- \r
- <pre>div:only-of-type {\r
-}\r
-\r
-<div>Does this element match?</div></pre>\r
-\r
- <p>\r
- The CSS selector should match the marked div element, because it is the only element of this type\r
- </p>\r
- </li>\r
- \r
- <li>\r
- <div class='defaultred'>\r
- <div class='test required'></div>\r
- <blockquote></blockquote>\r
- </div>\r
- \r
- <pre>div:only-of-type {\r
-}\r
-\r
-<div>Does this element match?</div>\r
-<blockquote></blockquote></pre>\r
-\r
- <p>\r
- The CSS selector should match the marked div element, because it is the only element of this type\r
- </p>\r
- </li> \r
-\r
- <li>\r
- <div class='defaultred'>\r
- <div class='test'></div>\r
- <blockquote>\r
- <div></div>\r
- </blockquote>\r
- </div>\r
- \r
- <pre>div:only-of-type {\r
-}\r
-\r
-<div>Does this element match?</div>\r
-<blockquote>\r
- <div></div>\r
-</blockquote></pre>\r
-\r
- <p>\r
- The CSS selector should match the marked div element, because it is the only element of this type in this scope\r
- </p>\r
- </li> \r
-\r
- <li>\r
- <div class='defaultgreen'>\r
- <div class='test default required'></div>\r
- <div></div>\r
- </div>\r
- \r
- <pre>div:only-of-type {\r
-}\r
-\r
-<div>Does this element match?</div>\r
-<div></div></pre>\r
-\r
- <p>\r
- The CSS selector should not match the marked div element, because it is not the only element of this type\r
- </p>\r
- </li>\r
-\r
- <li>\r
- <div class='defaultgreen'>\r
- <div id='appendChild' class='test default'></div>\r
- </div>\r
-\r
- <script type="text/javascript">\r
- <!--\r
-\r
- var ib = document.getElementById('appendChild');\r
- ib.parentNode.appendChild(document.createElement("div"));\r
- \r
- //-->\r
- </script>\r
- \r
- <pre>div:only-of-type {\r
-}\r
-\r
-<div id='appendChild'></div>\r
-\r
-var ib = document.getElementById('appendChild');\r
-ib.parentElement.appendChild(document.createElement("div"));</pre>\r
-\r
- <p>\r
- The CSS selector should not match the original div element, because it is\r
- not the only of its type anymore after another child with the same type is append \r
- by the Javascript code. \r
- </p>\r
- </li>\r
- </ol>\r
- </body>\r
-</html>\r
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <title>:only-of-type</title>
+
+ <style type='text/css'>
+ <!--
+
+ body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }
+ pre { background: #fff; padding: 0.5em; }
+ li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }
+ .test { display: block; padding: 0.75em; }
+ .base, .defaultgreen { background-color: #090; }
+ .defaultred { background-color: #900; }
+
+ .defaultred :only-of-type {
+ background-color: #090;
+ }
+
+ .defaultgreen :only-of-type {
+ background-color: #900;
+ }
+
+ blockquote {
+ margin: 0;
+ }
+
+ -->
+ </style>
+ </head>
+
+ <body>
+ <p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p>
+
+ <div class='base'></div>
+
+ <ol>
+ <li>
+ <div class='defaultred'>
+ <div class='test required'></div>
+ </div>
+
+ <pre>div:only-of-type {
+}
+
+<div>Does this element match?</div></pre>
+
+ <p>
+ The CSS selector should match the marked div element, because it is the only element of this type
+ </p>
+ </li>
+
+ <li>
+ <div class='defaultred'>
+ <div class='test required'></div>
+ <blockquote></blockquote>
+ </div>
+
+ <pre>div:only-of-type {
+}
+
+<div>Does this element match?</div>
+<blockquote></blockquote></pre>
+
+ <p>
+ The CSS selector should match the marked div element, because it is the only element of this type
+ </p>
+ </li>
+
+ <li>
+ <div class='defaultred'>
+ <div class='test'></div>
+ <blockquote>
+ <div></div>
+ </blockquote>
+ </div>
+
+ <pre>div:only-of-type {
+}
+
+<div>Does this element match?</div>
+<blockquote>
+ <div></div>
+</blockquote></pre>
+
+ <p>
+ The CSS selector should match the marked div element, because it is the only element of this type in this scope
+ </p>
+ </li>
+
+ <li>
+ <div class='defaultgreen'>
+ <div class='test default required'></div>
+ <div></div>
+ </div>
+
+ <pre>div:only-of-type {
+}
+
+<div>Does this element match?</div>
+<div></div></pre>
+
+ <p>
+ The CSS selector should not match the marked div element, because it is not the only element of this type
+ </p>
+ </li>
+
+ <li>
+ <div class='defaultgreen'>
+ <div id='appendChild' class='test default'></div>
+ </div>
+
+ <script type="text/javascript">
+ <!--
+
+ var ib = document.getElementById('appendChild');
+ ib.parentNode.appendChild(document.createElement("div"));
+
+ //-->
+ </script>
+
+ <pre>div:only-of-type {
+}
+
+<div id='appendChild'></div>
+
+var ib = document.getElementById('appendChild');
+ib.parentElement.appendChild(document.createElement("div"));</pre>
+
+ <p>
+ The CSS selector should not match the original div element, because it is
+ not the only of its type anymore after another child with the same type is append
+ by the Javascript code.
+ </p>
+ </li>
+ </ol>
+ </body>
+</html>