Ochronus onLine

where the rising ape meets the falling angel

FizzBuzz in CSS

Lo and behold, a pure CSS FizzBuzz implementation!

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box'>7</div>
<div class='box'>8</div>
<div class='box'>9</div>
<div class='box'>10</div>
<div class='box'>11</div>
<div class='box'>12</div>
<div class='box'>13</div>
<div class='box'>14</div>
<div class='box'>15</div>
<div class='box'>16</div>
<div class='box'>17</div>
<div class='box'>18</div>
<div class='box'>19</div>
<div class='box'>20</div>
</div>
.box {
width: 50px;
height: 50px;
background: #D3D3D3;
margin: 20px;
float: left;
font-size: 12px;
font-weight: bold;
color: black;
padding: 20px;
text-align: center;
}
.box:nth-of-type(3n) {
background: #F2AE72;
}
.box:nth-of-type(3n)::after {
content: " Fizz";
}
.box:nth-of-type(5n) {
background: #588C7E;
}
.box:nth-of-type(5n)::after {
content: " Buzz";
}
.box:nth-of-type(3n).box:nth-of-type(5n) {
background: #D96459 !important;
}
.box:nth-of-type(3n).box:nth-of-type(5n)::after {
content: " FizzBuzz"
}

Proudly powered by Hexo and Theme by Hacker
© 2017 ochronus