LayoutTests/fast/css/last-child-pseudo-class.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 \r
   3 <html>\r
   4         <head>\r
   5                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />\r
   6                 <title>:last-child</title>\r
   7                 \r
   8                 <style type='text/css'>\r
   9                 <!--\r
  10 \r
  11                         body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }\r
  12                         pre { background: #fff; padding: 0.5em; }\r
  13                         li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }\r
  14                         .test { display: block; padding: 0.75em; }\r
  15                         .base, .defaultgreen { background-color: #090; }\r
  16                         .defaultred { background-color: #900; }\r
  17                         \r
  18                         .defaultred :last-child {\r
  19                                 background-color: #090;\r
  20                         }\r
  21 \r
  22                         .defaultgreen :last-child {\r
  23                                 background-color: #900;\r
  24                         }\r
  25 \r
  26                         blockquote {\r
  27                                 margin: 0;\r
  28                         }\r
  29                         \r
  30                 -->\r
  31                 </style>\r
  32         </head>\r
  33 \r
  34         <body>\r
  35                 <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
  36                 \r
  37                 <div class='base'></div>\r
  38         \r
  39                 <ol>\r
  40                         <li>\r
  41                                 <div class='defaultred'>\r
  42                                         <div class='test required'></div>\r
  43                                 </div>\r
  44                                 \r
  45                                 <pre>div :last-child {\r
  46 }\r
  47 \r
  48 &lt;div&gt;\r
  49    &lt;div&gt;&lt;/div&gt;\r
  50 &lt;/div&gt;</pre>\r
  51 \r
  52                                 <p>\r
  53                                         The CSS selector should match the inner div element, because it is the only child of the outer div element\r
  54                                 </p>\r
  55                         </li>\r
  56 \r
  57                         <li>\r
  58                                 <div class='defaultred'>\r
  59                                         <blockquote></blockquote>\r
  60                                         <div class='test'></div>\r
  61                                 </div>\r
  62                                 \r
  63                                 <pre>div :last-child {\r
  64 }\r
  65 \r
  66 &lt;div&gt; \r
  67    &lt;blockquote&gt;&lt;/blockquote&gt;\r
  68    &lt;div&gt;&lt;/div&gt;\r
  69 &lt;/div&gt;</pre>\r
  70 \r
  71                                 <p>\r
  72                                         The CSS selector should match the inner div element, because it is the last child of the outer div element\r
  73                                 </p>\r
  74                         </li>\r
  75 \r
  76                         <li>\r
  77                                 <div class='defaultred'>\r
  78                                         <!-- Just a comment -->\r
  79                                         <div class='test'></div>\r
  80                                 </div>\r
  81                                 \r
  82                                 <pre>div :last-child {\r
  83 }\r
  84 \r
  85 &lt;div&gt; \r
  86    &lt;div&gt;&lt;/div&gt;\r
  87    &lt;!-- Just a comment --&gt;\r
  88 &lt;/div&gt;</pre>\r
  89 \r
  90                                 <p>\r
  91                                         The CSS selector should match the inner div element, because it is the last child of the outer div element\r
  92                                         Comments are not elements, so they should not be considered when determining the last child.\r
  93                                 </p>\r
  94                         </li>\r
  95 \r
  96                         <li>\r
  97                                 <div class='defaultred'>\r
  98                                         <div class='test'></div>\r
  99                                         .\r
 100                                 </div>\r
 101                                 \r
 102                                 <pre>div :last-child {\r
 103 }\r
 104 \r
 105 &lt;div&gt; \r
 106    &lt;div&gt;&lt;/div&gt;\r
 107    How about regular text...\r
 108 &lt;/div&gt;</pre>\r
 109 \r
 110                                 <p>\r
 111                                         The CSS selector should match the inner div element, because it is the last child of the outer div element.\r
 112                                         Regular text is not an element, so it should not be considered when determining the last child.\r
 113                                 </p>\r
 114                         </li>\r
 115 \r
 116                         <li>\r
 117                                 <div class='defaultgreen'>\r
 118                                         <div class='test default required'></div>\r
 119                                         <blockquote></blockquote>\r
 120                                 </div>\r
 121                                 \r
 122                                 <pre>div :last-child {\r
 123 }\r
 124 \r
 125 &lt;div&gt; \r
 126    &lt;div&gt;&lt;/div&gt;\r
 127    &lt;blockquote&gt;&lt;/blockquote&gt;\r
 128 &lt;/div&gt;</pre>\r
 129 \r
 130                                 <p>\r
 131                                         The CSS selector should not match the inner div element, because it is the first child of the outer div element\r
 132                                 </p>\r
 133                         </li>\r
 134 \r
 135                         <li>\r
 136                                 <div class='defaultred'>\r
 137                                         <div id='insertAfter1'></div>\r
 138                                 </div>\r
 139 \r
 140                                 <script type="text/javascript">\r
 141                                 <!--\r
 142 \r
 143                                         var ib = document.getElementById('insertAfter1');\r
 144                                         var el = document.createElement("div");\r
 145                                         el.className = 'test';\r
 146                                         ib.parentNode.appendChild(el);\r
 147 \r
 148                                 \r
 149                                 //-->\r
 150                                 </script>\r
 151                                 \r
 152                                 <pre>div :last-child {\r
 153 }\r
 154 \r
 155 &lt;div&gt;\r
 156    &lt;div id='insertAfter'&gt;&lt;/div&gt;\r
 157 &lt;/div&gt;\r
 158 \r
 159 var ib = document.getElementById('insertAfter');\r
 160 ib.parentElement.appendChild(document.createElement("div"));</pre>\r
 161 \r
 162                                 <p>\r
 163                                         The CSS selector should match the div element that is inserted by the Javascript code. \r
 164                                 </p>\r
 165                         </li>\r
 166 \r
 167                         <li>\r
 168                                 <div class='defaultgreen'>\r
 169                                         <div id='insertAfter2' class='test default'></div>\r
 170                                 </div>\r
 171 \r
 172                                 <script type="text/javascript">\r
 173                                 <!--\r
 174 \r
 175                                         var ib = document.getElementById('insertAfter2');\r
 176                                         ib.parentNode.appendChild(document.createElement("div"));\r
 177                                 \r
 178                                 //-->\r
 179                                 </script>\r
 180                                 \r
 181                                 <pre>div :last-child {\r
 182 }\r
 183 \r
 184 &lt;div&gt;\r
 185    &lt;div id='insertAfter'&gt;&lt;/div&gt;\r
 186 &lt;/div&gt;\r
 187 \r
 188 var ib = document.getElementById('insertAfter');\r
 189 ib.parentElement.appendChild(document.createElement("div"));</pre>\r
 190 \r
 191                                 <p>\r
 192                                         The original div element should not be a match for the :last-child selector.\r
 193                                 </p>\r
 194                         </li>\r
 195                 </ol>\r
 196         </body>\r
 197 </html>\r