Compute primes with CSS

Sieve of Eratosthenes, implemented in pure CSS

HTML

<p>Primes:</p>
<div>
<span>2</span>
<span>3</span>
<span>5</span>
<span>7</span>
<span>9</span>
<span>11</span>
<span>13</span>
<span>15</span>
<span>17</span>
<span>19</span>
<span>21</span>
<span>23</span>
<span>25</span>
<span>27</span>
<span>29</span>
<span>31</span>
<span>33</span>
<span>35</span>
<span>37</span>
<span>39</span>
<span>41</span>
<span>43</span>
<span>45</span>
<span>47</span>
<span>49</span>
<span>51</span>
<span>53</span>
<span>55</span>
<span>57</span>
<span>59</span>
<span>61</span>
<span>63</span>
<span>65</span>
<span>67</span>
<span>69</span>
<span>71</span>
<span>73</span>
<span>75</span>
<span>77</span>
<span>79</span>
<span>81</span>
<span>83</span>
<span>85</span>
<span>87</span>
<span>89</span>
<span>91</span>
<span>93</span>
<span>95</span>
<span>97</span>
<span>99</span>
<span>101</span>
<span>103</span>
<span>105</span>
<span>107</span>
<span>109</span>
<span>111</span>
<span>113</span>
<span>115</span>
<span>117</span>
<span>119</span>
<span>121</span>
<span>123</span>
<span>125</span>
<span>127</span>
<span>129</span>
<span>131</span>
<span>133</span>
<span>135</span>
<span>137</span>
<span>139</span>
<span>141</span>
<span>143</span>
<span>145</span>
<span>147</span>
<span>149</span>
<span>151</span>
<span>153</span>
<span>155</span>
<span>157</span>
<span>159</span>
<span>161</span>
<span>163</span>
<span>165</span>
<span>167</span>
<span>169</span>
<span>171</span>
<span>173</span>
<span>175</span>
<span>177</span>
<span>179</span>
<span>181</span>
<span>183</span>
<span>185</span>
<span>187</span>
<span>189</span>
<span>191</span>
<span>193</span>
<span>195</span>
<span>197</span>
<span>199</span>
<span>201</span>
<span>203</span>
<span>205</span>
<span>207</span>
<span>209</span>
<span>211</span>
<span>213</span>
<span>215</span>
<span>217</span>
<span>219</span>
<span>221</span>
<span>223</span>
<span>225</span>
<span>227</span>
<span>229</span>
<span>231</span>
<span>233</span>
<span>235</span>
<span>237</span>
<span>23...

CSS

/* A stupid pet trick by Ned Batchelder @nedbat */
html { max-width: 40rem; }
span { display: inline-block; width: 2em; text-align: right; }
span:nth-child(3n+5),  /* 5=(3^2+1)/2 */
span:nth-child(5n+13),
span:nth-child(7n+25), /* span:nth-child(9n+41), */
span:nth-child(11n+61),
span:nth-child(13n+85), /* span:nth-child(15n+113), */
span:nth-child(17n+145),
span:nth-child(19n+181), /* span:nth-child(21n+221), */
span:nth-child(23n+265), /* span:nth-child(25n+313), span:nth-child(27n+365), */
span:nth-child(29n+421),
span:nth-child(31n+481) {display:none;}