nth-child-of-attr-largedom.html (7830B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Selectors Invalidation: :nth-child(... of attribute) with a large DOM</title> 4 <link rel="author" title="Bramus" href="https://www.bram.us/"> 5 <link rel="match" href="nth-child-of-attr-largedom-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index"> 7 <style> 8 tr:nth-child(even of :not([hidden])){ 9 background: lightgrey; 10 } 11 </style> 12 <table border="1"> 13 <thead> 14 <tr> 15 <th>#</th> 16 </tr> 17 </thead> 18 <tbody> 19 <tr hidden="hidden"> 20 <td>1</td> 21 </tr> 22 <tr> 23 <td>2</td> 24 </tr> 25 <tr> 26 <td>3</td> 27 </tr> 28 <tr> 29 <td>4</td> 30 </tr> 31 <tr> 32 <td>5</td> 33 </tr> 34 <tr hidden="hidden"> 35 <td>6</td> 36 </tr> 37 <tr> 38 <td>7</td> 39 </tr> 40 <tr hidden="hidden"> 41 <td>8</td> 42 </tr> 43 <tr hidden="hidden"> 44 <td>9</td> 45 </tr> 46 <tr> 47 <td>10</td> 48 </tr> 49 <tr hidden="hidden"> 50 <td>11</td> 51 </tr> 52 <tr> 53 <td>12</td> 54 </tr> 55 <tr hidden="hidden"> 56 <td>13</td> 57 </tr> 58 <tr hidden="hidden"> 59 <td>14</td> 60 </tr> 61 <tr hidden="hidden"> 62 <td>15</td> 63 </tr> 64 <tr hidden="hidden"> 65 <td>16</td> 66 </tr> 67 <tr hidden="hidden"> 68 <td>17</td> 69 </tr> 70 <tr hidden="hidden"> 71 <td>18</td> 72 </tr> 73 <tr> 74 <td>19</td> 75 </tr> 76 <tr hidden="hidden"> 77 <td>20</td> 78 </tr> 79 <tr hidden="hidden"> 80 <td>21</td> 81 </tr> 82 <tr hidden="hidden"> 83 <td>22</td> 84 </tr> 85 <tr hidden="hidden"> 86 <td>23</td> 87 </tr> 88 <tr hidden="hidden"> 89 <td>24</td> 90 </tr> 91 <tr hidden="hidden"> 92 <td>25</td> 93 </tr> 94 <tr hidden="hidden"> 95 <td>26</td> 96 </tr> 97 <tr hidden="hidden"> 98 <td>27</td> 99 </tr> 100 <tr> 101 <td>28</td> 102 </tr> 103 <tr> 104 <td>29</td> 105 </tr> 106 <tr hidden="hidden"> 107 <td>30</td> 108 </tr> 109 <tr hidden="hidden"> 110 <td>31</td> 111 </tr> 112 <tr hidden="hidden"> 113 <td>32</td> 114 </tr> 115 <tr hidden="hidden"> 116 <td>33</td> 117 </tr> 118 <tr hidden="hidden"> 119 <td>34</td> 120 </tr> 121 <tr> 122 <td>35</td> 123 </tr> 124 <tr hidden="hidden"> 125 <td>36</td> 126 </tr> 127 <tr> 128 <td>37</td> 129 </tr> 130 <tr hidden="hidden"> 131 <td>38</td> 132 </tr> 133 <tr hidden="hidden"> 134 <td>39</td> 135 </tr> 136 <tr hidden="hidden"> 137 <td>40</td> 138 </tr> 139 <tr hidden="hidden"> 140 <td>41</td> 141 </tr> 142 <tr hidden="hidden"> 143 <td>42</td> 144 </tr> 145 <tr> 146 <td>43</td> 147 </tr> 148 <tr hidden="hidden"> 149 <td>44</td> 150 </tr> 151 <tr> 152 <td>45</td> 153 </tr> 154 <tr hidden="hidden"> 155 <td>46</td> 156 </tr> 157 <tr hidden="hidden"> 158 <td>47</td> 159 </tr> 160 <tr hidden="hidden"> 161 <td>48</td> 162 </tr> 163 <tr hidden="hidden"> 164 <td>49</td> 165 </tr> 166 <tr hidden="hidden"> 167 <td>50</td> 168 </tr> 169 <tr> 170 <td>51</td> 171 </tr> 172 <tr> 173 <td>52</td> 174 </tr> 175 <tr hidden="hidden"> 176 <td>53</td> 177 </tr> 178 <tr hidden="hidden"> 179 <td>54</td> 180 </tr> 181 <tr hidden="hidden"> 182 <td>55</td> 183 </tr> 184 <tr hidden="hidden"> 185 <td>56</td> 186 </tr> 187 <tr> 188 <td>57</td> 189 </tr> 190 <tr hidden="hidden"> 191 <td>58</td> 192 </tr> 193 <tr hidden="hidden"> 194 <td>59</td> 195 </tr> 196 <tr hidden="hidden"> 197 <td>60</td> 198 </tr> 199 <tr> 200 <td>61</td> 201 </tr> 202 <tr hidden="hidden"> 203 <td>62</td> 204 </tr> 205 <tr hidden="hidden"> 206 <td>63</td> 207 </tr> 208 <tr hidden="hidden"> 209 <td>64</td> 210 </tr> 211 <tr hidden="hidden"> 212 <td>65</td> 213 </tr> 214 <tr hidden="hidden"> 215 <td>66</td> 216 </tr> 217 <tr hidden="hidden"> 218 <td>67</td> 219 </tr> 220 <tr> 221 <td>68</td> 222 </tr> 223 <tr hidden="hidden"> 224 <td>69</td> 225 </tr> 226 <tr> 227 <td>70</td> 228 </tr> 229 <tr hidden="hidden"> 230 <td>71</td> 231 </tr> 232 <tr hidden="hidden"> 233 <td>72</td> 234 </tr> 235 <tr hidden="hidden"> 236 <td>73</td> 237 </tr> 238 <tr hidden="hidden"> 239 <td>74</td> 240 </tr> 241 <tr> 242 <td>75</td> 243 </tr> 244 <tr hidden="hidden"> 245 <td>76</td> 246 </tr> 247 <tr hidden="hidden"> 248 <td>77</td> 249 </tr> 250 <tr> 251 <td>78</td> 252 </tr> 253 <tr hidden="hidden"> 254 <td>79</td> 255 </tr> 256 <tr hidden="hidden"> 257 <td>80</td> 258 </tr> 259 <tr hidden="hidden"> 260 <td>81</td> 261 </tr> 262 <tr hidden="hidden"> 263 <td>82</td> 264 </tr> 265 <tr hidden="hidden"> 266 <td>83</td> 267 </tr> 268 <tr> 269 <td>84</td> 270 </tr> 271 <tr hidden="hidden"> 272 <td>85</td> 273 </tr> 274 <tr hidden="hidden"> 275 <td>86</td> 276 </tr> 277 <tr hidden="hidden"> 278 <td>87</td> 279 </tr> 280 <tr hidden="hidden"> 281 <td>88</td> 282 </tr> 283 <tr hidden="hidden"> 284 <td>89</td> 285 </tr> 286 <tr> 287 <td>90</td> 288 </tr> 289 <tr hidden="hidden"> 290 <td>91</td> 291 </tr> 292 <tr hidden="hidden"> 293 <td>92</td> 294 </tr> 295 <tr hidden="hidden"> 296 <td>93</td> 297 </tr> 298 <tr hidden="hidden"> 299 <td>94</td> 300 </tr> 301 <tr hidden="hidden"> 302 <td>95</td> 303 </tr> 304 <tr hidden="hidden"> 305 <td>96</td> 306 </tr> 307 <tr hidden="hidden"> 308 <td>97</td> 309 </tr> 310 <tr hidden="hidden"> 311 <td>98</td> 312 </tr> 313 <tr hidden="hidden"> 314 <td>99</td> 315 </tr> 316 <tr hidden="hidden"> 317 <td>100</td> 318 </tr> 319 <tr> 320 <td>101</td> 321 </tr> 322 <tr> 323 <td>102</td> 324 </tr> 325 <tr hidden="hidden"> 326 <td>103</td> 327 </tr> 328 <tr hidden="hidden"> 329 <td>104</td> 330 </tr> 331 <tr hidden="hidden"> 332 <td>105</td> 333 </tr> 334 <tr> 335 <td>106</td> 336 </tr> 337 <tr hidden="hidden"> 338 <td>107</td> 339 </tr> 340 <tr hidden="hidden"> 341 <td>108</td> 342 </tr> 343 <tr hidden="hidden"> 344 <td>109</td> 345 </tr> 346 <tr hidden="hidden"> 347 <td>110</td> 348 </tr> 349 <tr hidden="hidden"> 350 <td>111</td> 351 </tr> 352 <tr hidden="hidden"> 353 <td>112</td> 354 </tr> 355 <tr> 356 <td>113</td> 357 </tr> 358 <tr> 359 <td>114</td> 360 </tr> 361 <tr> 362 <td>115</td> 363 </tr> 364 <tr> 365 <td>116</td> 366 </tr> 367 <tr> 368 <td>117</td> 369 </tr> 370 <tr> 371 <td>118</td> 372 </tr> 373 <tr hidden="hidden"> 374 <td>119</td> 375 </tr> 376 <tr> 377 <td>120</td> 378 </tr> 379 <tr hidden="hidden"> 380 <td>121</td> 381 </tr> 382 <tr hidden="hidden"> 383 <td>122</td> 384 </tr> 385 <tr hidden="hidden"> 386 <td>123</td> 387 </tr> 388 <tr hidden="hidden"> 389 <td>124</td> 390 </tr> 391 <tr hidden="hidden"> 392 <td>125</td> 393 </tr> 394 <tr hidden="hidden"> 395 <td>126</td> 396 </tr> 397 <tr hidden="hidden"> 398 <td>127</td> 399 </tr> 400 <tr hidden="hidden"> 401 <td>128</td> 402 </tr> 403 <tr> 404 <td>129</td> 405 </tr> 406 <tr hidden="hidden"> 407 <td>130</td> 408 </tr> 409 <tr hidden="hidden"> 410 <td>131</td> 411 </tr> 412 <tr hidden="hidden"> 413 <td>132</td> 414 </tr> 415 <tr> 416 <td>133</td> 417 </tr> 418 <tr> 419 <td>134</td> 420 </tr> 421 <tr hidden="hidden"> 422 <td>135</td> 423 </tr> 424 <tr hidden="hidden"> 425 <td>136</td> 426 </tr> 427 <tr> 428 <td>137</td> 429 </tr> 430 <tr> 431 <td>138</td> 432 </tr> 433 <tr hidden="hidden"> 434 <td>139</td> 435 </tr> 436 <tr hidden="hidden"> 437 <td>140</td> 438 </tr> 439 <tr> 440 <td>141</td> 441 </tr> 442 <tr> 443 <td>142</td> 444 </tr> 445 <tr hidden="hidden"> 446 <td>143</td> 447 </tr> 448 <tr hidden="hidden"> 449 <td>144</td> 450 </tr> 451 <tr hidden="hidden"> 452 <td>145</td> 453 </tr> 454 <tr hidden="hidden"> 455 <td>146</td> 456 </tr> 457 </tbody> 458 </table> 459 <script> 460 document.documentElement.offsetTop; 461 document.querySelectorAll(`tbody tr:not([data-affiliation=google-llc"])`).forEach($tr => $tr.setAttribute('hidden', 'hidden')); 462 </script>