FizzBuzz in CSS

Post Reply
User avatar
jessica
Site Admin
Posts: 31
Joined: Thu Sep 06, 2018 3:17 pm
Location: Cincinnati, Ohio
Contact:

FizzBuzz in CSS

Post by jessica » Fri Sep 07, 2018 8:08 am


body {

2

counter-reset: fizzbuzz;

3

background-color: #1D1E22;

4

width: 300px;

5

margin: auto;

6

}

7



8

div {

9

width: 75px;

10

height: 25px;

11

border-radius: 5px;

12

border: 1px solid #ddd;

13

margin: 10px 10px 0px 0px;

14

padding: 5px;

15

text-align: center;

16

float: left;

17

display: flex;

18

flex-flow: row wrap;

19

}

20



21

div:after {

22

color: bisque;

23

content: counter(fizzbuzz);

24

counter-increment: fizzbuzz;

25

flex: 1;

26

}

27



28

div:nth-child(3n):not(:nth-child(5n)):after {

29

content: "Fizz";

30

color: darksalmon;

31

}

32



33

div:nth-child(5n):not(:nth-child(3n)):after {

34

content: "Buzz";

35

color: aquamarine;

36

}

37



38

div:nth-child(3n):nth-child(5n):after {

39

content: "FizzBuzz";

40

color: darkseagreen;

41

}

<div></div>


2
<div></div>


3
<div></div>


4
<div></div>


5
<div></div>


6
<div></div>


7
<div></div>


8
<div></div>


9
<div></div>


10
<div></div>


11
<div></div>


12
<div></div>


13
<div></div>


14
<div></div>


15
<div></div>


16
<div></div>


17
<div></div>


18
<div></div>


19
<div></div>


20
<div></div>


21
<div></div>


22
<div></div>


23
<div></div>


24
<div></div>


25
<div></div>


26
<div></div>


27
<div></div>


28
<div></div>


29
<div></div>


30
<div></div>


31
<div></div>
Post Reply