Compute primes with CSS

Sieve of Eratosthenes, implemented in pure CSS

HTML

<p>Primes:</p>
<div>
<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<...

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(2n+4),
span:nth-child(3n+6),
span:nth-child(4n+8),
span:nth-child(5n+10),
span:nth-child(6n+12),
span:nth-child(7n+14),
span:nth-child(8n+16),
span:nth-child(9n+18),
span:nth-child(10n+20),
span:nth-child(11n+22),
span:nth-child(12n+24),
span:nth-child(13n+26),
span:nth-child(14n+28),
span:nth-child(15n+30),
span:nth-child(16n+32),
span:nth-child(17n+34),
span:nth-child(18n+36),
span:nth-child(19n+38),
span:nth-child(20n+40),
span:nth-child(21n+42),
span:nth-child(22n+44),
span:nth-child(23n+46),
span:nth-child(24n+48),
span:nth-child(25n+50),
span:nth-child(26n+52),
span:nth-child(27n+54),
span:nth-child(28n+56),
span:nth-child(29n+58),
span:nth-child(30n+60),
span:nth-child(31n+62),
span:nth-child(32n+64),
span:first-child { display: none; }