Skip to content

Instantly share code, notes, and snippets.

@nedbat

nedbat/prime_css.html

Created September 16, 2016 19:27
Show Gist options
  • Save nedbat/c54c0879b58b2ead398f73c3465c84ee to your computer and use it in GitHub Desktop.
Save nedbat/c54c0879b58b2ead398f73c3465c84ee to your computer and use it in GitHub Desktop.
Download ZIP
Computing primes with CSS
Raw
prime_css.html
<html>
<head>
<style>
span { background: pink; }
span:nth-child(2n+4) { background: white; }
span:nth-child(3n+6) { background: white; }
span:nth-child(4n+8) { background: white; }
span:nth-child(5n+10) { background: white; }
span:nth-child(6n+12) { background: white; }
span:nth-child(7n+14) { background: white; }
span:nth-child(8n+16) { background: white; }
span:nth-child(9n+18) { background: white; }
span:nth-child(10n+20) { background: white; }
span:nth-child(11n+22) { background: white; }
span:nth-child(12n+24) { background: white; }
span:nth-child(13n+26) { background: white; }
span:nth-child(14n+28) { background: white; }
span:nth-child(15n+30) { background: white; }
span:nth-child(16n+32) { background: white; }
span:nth-child(17n+34) { background: white; }
span:nth-child(18n+36) { background: white; }
span:nth-child(19n+38) { background: white; }
span:nth-child(20n+40) { background: white; }
span:nth-child(21n+42) { background: white; }
span:nth-child(22n+44) { background: white; }
span:nth-child(23n+46) { background: white; }
span:nth-child(24n+48) { background: white; }
span:nth-child(25n+50) { background: white; }
span:nth-child(26n+52) { background: white; }
span:nth-child(27n+54) { background: white; }
span:nth-child(28n+56) { background: white; }
span:nth-child(29n+58) { background: white; }
span:nth-child(30n+60) { background: white; }
span:nth-child(31n+62) { background: white; }
span:nth-child(32n+64) { background: white; }
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span>32</span>
<span>33</span>
<span>34</span>
<span>35</span>
<span>36</span>
<span>37</span>
<span>38</span>
<span>39</span>
<span>40</span>
<span>41</span>
<span>42</span>
<span>43</span>
<span>44</span>
<span>45</span>
<span>46</span>
<span>47</span>
<span>48</span>
<span>49</span>
<span>50</span>
<span>51</span>
<span>52</span>
<span>53</span>
<span>54</span>
<span>55</span>
<span>56</span>
<span>57</span>
<span>58</span>
<span>59</span>
<span>60</span>
<span>61</span>
<span>62</span>
<span>63</span>
<span>64</span>
<span>65</span>
<span>66</span>
<span>67</span>
<span>68</span>
<span>69</span>
<span>70</span>
<span>71</span>
<span>72</span>
<span>73</span>
<span>74</span>
<span>75</span>
<span>76</span>
<span>77</span>
<span>78</span>
<span>79</span>
<span>80</span>
<span>81</span>
<span>82</span>
<span>83</span>
<span>84</span>
<span>85</span>
<span>86</span>
<span>87</span>
<span>88</span>
<span>89</span>
<span>90</span>
<span>91</span>
<span>92</span>
<span>93</span>
<span>94</span>
<span>95</span>
<span>96</span>
<span>97</span>
<span>98</span>
<span>99</span>
<span>100</span>
<span>101</span>
<span>102</span>
<span>103</span>
<span>104</span>
<span>105</span>
<span>106</span>
<span>107</span>
<span>108</span>
<span>109</span>
<span>110</span>
<span>111</span>
<span>112</span>
<span>113</span>
<span>114</span>
<span>115</span>
<span>116</span>
<span>117</span>
<span>118</span>
<span>119</span>
<span>120</span>
<span>121</span>
<span>122</span>
<span>123</span>
<span>124</span>
<span>125</span>
<span>126</span>
<span>127</span>
<span>128</span>
<span>129</span>
<span>130</span>
<span>131</span>
<span>132</span>
<span>133</span>
<span>134</span>
<span>135</span>
<span>136</span>
<span>137</span>
<span>138</span>
<span>139</span>
<span>140</span>
<span>141</span>
<span>142</span>
<span>143</span>
<span>144</span>
<span>145</span>
<span>146</span>
<span>147</span>
<span>148</span>
<span>149</span>
<span>150</span>
<span>151</span>
<span>152</span>
<span>153</span>
<span>154</span>
<span>155</span>
<span>156</span>
<span>157</span>
<span>158</span>
<span>159</span>
<span>160</span>
<span>161</span>
<span>162</span>
<span>163</span>
<span>164</span>
<span>165</span>
<span>166</span>
<span>167</span>
<span>168</span>
<span>169</span>
<span>170</span>
<span>171</span>
<span>172</span>
<span>173</span>
<span>174</span>
<span>175</span>
<span>176</span>
<span>177</span>
<span>178</span>
<span>179</span>
<span>180</span>
<span>181</span>
<span>182</span>
<span>183</span>
<span>184</span>
<span>185</span>
<span>186</span>
<span>187</span>
<span>188</span>
<span>189</span>
<span>190</span>
<span>191</span>
<span>192</span>
<span>193</span>
<span>194</span>
<span>195</span>
<span>196</span>
<span>197</span>
<span>198</span>
<span>199</span>
<span>200</span>
<span>201</span>
<span>202</span>
<span>203</span>
<span>204</span>
<span>205</span>
<span>206</span>
<span>207</span>
<span>208</span>
<span>209</span>
<span>210</span>
<span>211</span>
<span>212</span>
<span>213</span>
<span>214</span>
<span>215</span>
<span>216</span>
<span>217</span>
<span>218</span>
<span>219</span>
<span>220</span>
<span>221</span>
<span>222</span>
<span>223</span>
<span>224</span>
<span>225</span>
<span>226</span>
<span>227</span>
<span>228</span>
<span>229</span>
<span>230</span>
<span>231</span>
<span>232</span>
<span>233</span>
<span>234</span>
<span>235</span>
<span>236</span>
<span>237</span>
<span>238</span>
<span>239</span>
<span>240</span>
<span>241</span>
<span>242</span>
<span>243</span>
<span>244</span>
<span>245</span>
<span>246</span>
<span>247</span>
<span>248</span>
<span>249</span>
<span>250</span>
<span>251</span>
<span>252</span>
<span>253</span>
<span>254</span>
<span>255</span>
<span>256</span>
<span>257</span>
<span>258</span>
<span>259</span>
<span>260</span>
<span>261</span>
<span>262</span>
<span>263</span>
<span>264</span>
<span>265</span>
<span>266</span>
<span>267</span>
<span>268</span>
<span>269</span>
<span>270</span>
<span>271</span>
<span>272</span>
<span>273</span>
<span>274</span>
<span>275</span>
<span>276</span>
<span>277</span>
<span>278</span>
<span>279</span>
<span>280</span>
<span>281</span>
<span>282</span>
<span>283</span>
<span>284</span>
<span>285</span>
<span>286</span>
<span>287</span>
<span>288</span>
<span>289</span>
<span>290</span>
<span>291</span>
<span>292</span>
<span>293</span>
<span>294</span>
<span>295</span>
<span>296</span>
<span>297</span>
<span>298</span>
<span>299</span>
<span>300</span>
<span>301</span>
<span>302</span>
<span>303</span>
<span>304</span>
<span>305</span>
<span>306</span>
<span>307</span>
<span>308</span>
<span>309</span>
<span>310</span>
<span>311</span>
<span>312</span>
<span>313</span>
<span>314</span>
<span>315</span>
<span>316</span>
<span>317</span>
<span>318</span>
<span>319</span>
<span>320</span>
<span>321</span>
<span>322</span>
<span>323</span>
<span>324</span>
<span>325</span>
<span>326</span>
<span>327</span>
<span>328</span>
<span>329</span>
<span>330</span>
<span>331</span>
<span>332</span>
<span>333</span>
<span>334</span>
<span>335</span>
<span>336</span>
<span>337</span>
<span>338</span>
<span>339</span>
<span>340</span>
<span>341</span>
<span>342</span>
<span>343</span>
<span>344</span>
<span>345</span>
<span>346</span>
<span>347</span>
<span>348</span>
<span>349</span>
<span>350</span>
<span>351</span>
<span>352</span>
<span>353</span>
<span>354</span>
<span>355</span>
<span>356</span>
<span>357</span>
<span>358</span>
<span>359</span>
<span>360</span>
<span>361</span>
<span>362</span>
<span>363</span>
<span>364</span>
<span>365</span>
<span>366</span>
<span>367</span>
<span>368</span>
<span>369</span>
<span>370</span>
<span>371</span>
<span>372</span>
<span>373</span>
<span>374</span>
<span>375</span>
<span>376</span>
<span>377</span>
<span>378</span>
<span>379</span>
<span>380</span>
<span>381</span>
<span>382</span>
<span>383</span>
<span>384</span>
<span>385</span>
<span>386</span>
<span>387</span>
<span>388</span>
<span>389</span>
<span>390</span>
<span>391</span>
<span>392</span>
<span>393</span>
<span>394</span>
<span>395</span>
<span>396</span>
<span>397</span>
<span>398</span>
<span>399</span>
<span>400</span>
<span>401</span>
<span>402</span>
<span>403</span>
<span>404</span>
<span>405</span>
<span>406</span>
<span>407</span>
<span>408</span>
<span>409</span>
<span>410</span>
<span>411</span>
<span>412</span>
<span>413</span>
<span>414</span>
<span>415</span>
<span>416</span>
<span>417</span>
<span>418</span>
<span>419</span>
<span>420</span>
<span>421</span>
<span>422</span>
<span>423</span>
<span>424</span>
<span>425</span>
<span>426</span>
<span>427</span>
<span>428</span>
<span>429</span>
<span>430</span>
<span>431</span>
<span>432</span>
<span>433</span>
<span>434</span>
<span>435</span>
<span>436</span>
<span>437</span>
<span>438</span>
<span>439</span>
<span>440</span>
<span>441</span>
<span>442</span>
<span>443</span>
<span>444</span>
<span>445</span>
<span>446</span>
<span>447</span>
<span>448</span>
<span>449</span>
<span>450</span>
<span>451</span>
<span>452</span>
<span>453</span>
<span>454</span>
<span>455</span>
<span>456</span>
<span>457</span>
<span>458</span>
<span>459</span>
<span>460</span>
<span>461</span>
<span>462</span>
<span>463</span>
<span>464</span>
<span>465</span>
<span>466</span>
<span>467</span>
<span>468</span>
<span>469</span>
<span>470</span>
<span>471</span>
<span>472</span>
<span>473</span>
<span>474</span>
<span>475</span>
<span>476</span>
<span>477</span>
<span>478</span>
<span>479</span>
<span>480</span>
<span>481</span>
<span>482</span>
<span>483</span>
<span>484</span>
<span>485</span>
<span>486</span>
<span>487</span>
<span>488</span>
<span>489</span>
<span>490</span>
<span>491</span>
<span>492</span>
<span>493</span>
<span>494</span>
<span>495</span>
<span>496</span>
<span>497</span>
<span>498</span>
<span>499</span>
<span>500</span>
<span>501</span>
<span>502</span>
<span>503</span>
<span>504</span>
<span>505</span>
<span>506</span>
<span>507</span>
<span>508</span>
<span>509</span>
<span>510</span>
<span>511</span>
<span>512</span>
<span>513</span>
<span>514</span>
<span>515</span>
<span>516</span>
<span>517</span>
<span>518</span>
<span>519</span>
<span>520</span>
<span>521</span>
<span>522</span>
<span>523</span>
<span>524</span>
<span>525</span>
<span>526</span>
<span>527</span>
<span>528</span>
<span>529</span>
<span>530</span>
<span>531</span>
<span>532</span>
<span>533</span>
<span>534</span>
<span>535</span>
<span>536</span>
<span>537</span>
<span>538</span>
<span>539</span>
<span>540</span>
<span>541</span>
<span>542</span>
<span>543</span>
<span>544</span>
<span>545</span>
<span>546</span>
<span>547</span>
<span>548</span>
<span>549</span>
<span>550</span>
<span>551</span>
<span>552</span>
<span>553</span>
<span>554</span>
<span>555</span>
<span>556</span>
<span>557</span>
<span>558</span>
<span>559</span>
<span>560</span>
<span>561</span>
<span>562</span>
<span>563</span>
<span>564</span>
<span>565</span>
<span>566</span>
<span>567</span>
<span>568</span>
<span>569</span>
<span>570</span>
<span>571</span>
<span>572</span>
<span>573</span>
<span>574</span>
<span>575</span>
<span>576</span>
<span>577</span>
<span>578</span>
<span>579</span>
<span>580</span>
<span>581</span>
<span>582</span>
<span>583</span>
<span>584</span>
<span>585</span>
<span>586</span>
<span>587</span>
<span>588</span>
<span>589</span>
<span>590</span>
<span>591</span>
<span>592</span>
<span>593</span>
<span>594</span>
<span>595</span>
<span>596</span>
<span>597</span>
<span>598</span>
<span>599</span>
<span>600</span>
<span>601</span>
<span>602</span>
<span>603</span>
<span>604</span>
<span>605</span>
<span>606</span>
<span>607</span>
<span>608</span>
<span>609</span>
<span>610</span>
<span>611</span>
<span>612</span>
<span>613</span>
<span>614</span>
<span>615</span>
<span>616</span>
<span>617</span>
<span>618</span>
<span>619</span>
<span>620</span>
<span>621</span>
<span>622</span>
<span>623</span>
<span>624</span>
<span>625</span>
<span>626</span>
<span>627</span>
<span>628</span>
<span>629</span>
<span>630</span>
<span>631</span>
<span>632</span>
<span>633</span>
<span>634</span>
<span>635</span>
<span>636</span>
<span>637</span>
<span>638</span>
<span>639</span>
<span>640</span>
<span>641</span>
<span>642</span>
<span>643</span>
<span>644</span>
<span>645</span>
<span>646</span>
<span>647</span>
<span>648</span>
<span>649</span>
<span>650</span>
<span>651</span>
<span>652</span>
<span>653</span>
<span>654</span>
<span>655</span>
<span>656</span>
<span>657</span>
<span>658</span>
<span>659</span>
<span>660</span>
<span>661</span>
<span>662</span>
<span>663</span>
<span>664</span>
<span>665</span>
<span>666</span>
<span>667</span>
<span>668</span>
<span>669</span>
<span>670</span>
<span>671</span>
<span>672</span>
<span>673</span>
<span>674</span>
<span>675</span>
<span>676</span>
<span>677</span>
<span>678</span>
<span>679</span>
<span>680</span>
<span>681</span>
<span>682</span>
<span>683</span>
<span>684</span>
<span>685</span>
<span>686</span>
<span>687</span>
<span>688</span>
<span>689</span>
<span>690</span>
<span>691</span>
<span>692</span>
<span>693</span>
<span>694</span>
<span>695</span>
<span>696</span>
<span>697</span>
<span>698</span>
<span>699</span>
<span>700</span>
<span>701</span>
<span>702</span>
<span>703</span>
<span>704</span>
<span>705</span>
<span>706</span>
<span>707</span>
<span>708</span>
<span>709</span>
<span>710</span>
<span>711</span>
<span>712</span>
<span>713</span>
<span>714</span>
<span>715</span>
<span>716</span>
<span>717</span>
<span>718</span>
<span>719</span>
<span>720</span>
<span>721</span>
<span>722</span>
<span>723</span>
<span>724</span>
<span>725</span>
<span>726</span>
<span>727</span>
<span>728</span>
<span>729</span>
<span>730</span>
<span>731</span>
<span>732</span>
<span>733</span>
<span>734</span>
<span>735</span>
<span>736</span>
<span>737</span>
<span>738</span>
<span>739</span>
<span>740</span>
<span>741</span>
<span>742</span>
<span>743</span>
<span>744</span>
<span>745</span>
<span>746</span>
<span>747</span>
<span>748</span>
<span>749</span>
<span>750</span>
<span>751</span>
<span>752</span>
<span>753</span>
<span>754</span>
<span>755</span>
<span>756</span>
<span>757</span>
<span>758</span>
<span>759</span>
<span>760</span>
<span>761</span>
<span>762</span>
<span>763</span>
<span>764</span>
<span>765</span>
<span>766</span>
<span>767</span>
<span>768</span>
<span>769</span>
<span>770</span>
<span>771</span>
<span>772</span>
<span>773</span>
<span>774</span>
<span>775</span>
<span>776</span>
<span>777</span>
<span>778</span>
<span>779</span>
<span>780</span>
<span>781</span>
<span>782</span>
<span>783</span>
<span>784</span>
<span>785</span>
<span>786</span>
<span>787</span>
<span>788</span>
<span>789</span>
<span>790</span>
<span>791</span>
<span>792</span>
<span>793</span>
<span>794</span>
<span>795</span>
<span>796</span>
<span>797</span>
<span>798</span>
<span>799</span>
<span>800</span>
<span>801</span>
<span>802</span>
<span>803</span>
<span>804</span>
<span>805</span>
<span>806</span>
<span>807</span>
<span>808</span>
<span>809</span>
<span>810</span>
<span>811</span>
<span>812</span>
<span>813</span>
<span>814</span>
<span>815</span>
<span>816</span>
<span>817</span>
<span>818</span>
<span>819</span>
<span>820</span>
<span>821</span>
<span>822</span>
<span>823</span>
<span>824</span>
<span>825</span>
<span>826</span>
<span>827</span>
<span>828</span>
<span>829</span>
<span>830</span>
<span>831</span>
<span>832</span>
<span>833</span>
<span>834</span>
<span>835</span>
<span>836</span>
<span>837</span>
<span>838</span>
<span>839</span>
<span>840</span>
<span>841</span>
<span>842</span>
<span>843</span>
<span>844</span>
<span>845</span>
<span>846</span>
<span>847</span>
<span>848</span>
<span>849</span>
<span>850</span>
<span>851</span>
<span>852</span>
<span>853</span>
<span>854</span>
<span>855</span>
<span>856</span>
<span>857</span>
<span>858</span>
<span>859</span>
<span>860</span>
<span>861</span>
<span>862</span>
<span>863</span>
<span>864</span>
<span>865</span>
<span>866</span>
<span>867</span>
<span>868</span>
<span>869</span>
<span>870</span>
<span>871</span>
<span>872</span>
<span>873</span>
<span>874</span>
<span>875</span>
<span>876</span>
<span>877</span>
<span>878</span>
<span>879</span>
<span>880</span>
<span>881</span>
<span>882</span>
<span>883</span>
<span>884</span>
<span>885</span>
<span>886</span>
<span>887</span>
<span>888</span>
<span>889</span>
<span>890</span>
<span>891</span>
<span>892</span>
<span>893</span>
<span>894</span>
<span>895</span>
<span>896</span>
<span>897</span>
<span>898</span>
<span>899</span>
<span>900</span>
<span>901</span>
<span>902</span>
<span>903</span>
<span>904</span>
<span>905</span>
<span>906</span>
<span>907</span>
<span>908</span>
<span>909</span>
<span>910</span>
<span>911</span>
<span>912</span>
<span>913</span>
<span>914</span>
<span>915</span>
<span>916</span>
<span>917</span>
<span>918</span>
<span>919</span>
<span>920</span>
<span>921</span>
<span>922</span>
<span>923</span>
<span>924</span>
<span>925</span>
<span>926</span>
<span>927</span>
<span>928</span>
<span>929</span>
<span>930</span>
<span>931</span>
<span>932</span>
<span>933</span>
<span>934</span>
<span>935</span>
<span>936</span>
<span>937</span>
<span>938</span>
<span>939</span>
<span>940</span>
<span>941</span>
<span>942</span>
<span>943</span>
<span>944</span>
<span>945</span>
<span>946</span>
<span>947</span>
<span>948</span>
<span>949</span>
<span>950</span>
<span>951</span>
<span>952</span>
<span>953</span>
<span>954</span>
<span>955</span>
<span>956</span>
<span>957</span>
<span>958</span>
<span>959</span>
<span>960</span>
<span>961</span>
<span>962</span>
<span>963</span>
<span>964</span>
<span>965</span>
<span>966</span>
<span>967</span>
<span>968</span>
<span>969</span>
<span>970</span>
<span>971</span>
<span>972</span>
<span>973</span>
<span>974</span>
<span>975</span>
<span>976</span>
<span>977</span>
<span>978</span>
<span>979</span>
<span>980</span>
<span>981</span>
<span>982</span>
<span>983</span>
<span>984</span>
<span>985</span>
<span>986</span>
<span>987</span>
<span>988</span>
<span>989</span>
<span>990</span>
<span>991</span>
<span>992</span>
<span>993</span>
<span>994</span>
<span>995</span>
<span>996</span>
<span>997</span>
<span>998</span>
<span>999</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment