I’m trying to render the fizz buzz function in an unordered list, with each word corresponding to a different color (‘fizz’– green, ‘buzz’–blue) like so:
I’m successfully rendering “fizz” and “buzz” in their colors on their own, but when it comes to rendering the “fizzbuzz” line, the entire background of the <li>
is split between green and blue instead of only the individual words.
Here’s the css selector responsible for “fizzbuzz”:
JavaScript
x
6
1
li:nth-child(3n + 0):nth-child(5n + 0) {2
background-image: linear-gradient(to right, green 50%, blue 50%);3
background-clip: text;4
text-fill-color: transparent;5
}6
I tried modifying the display property on the parent <ul> to “inline” but that doesn’t fix the problem:
JavaScript
1
10
10
1
ul {2
display: flex;3
flex-direction: column;4
flex-wrap: wrap;5
list-style-type: none;6
display: in-line;7
8
}9
10
I’m trying to do this in pure css without modifying my html/js. Here’s the code:
JavaScript
1
14
14
1
const unorderedList = Array.from(document.querySelector("ul").children);2
3
function fizzbuzz(elements) {4
for (var i = 0; i < elements.length; i++) {5
var result = "";6
var line = i + 1;7
if (line % 3 === 0) result += "Fizz"; 8
if (line % 5 === 0) result += "Buzz";9
if (result.length ===0) result = line;10
elements[i].innerText = result;11
}12
}13
14
fizzbuzz(unorderedList)JavaScript
1
23
23
1
ul {2
display: flex;3
flex-direction: column;4
flex-wrap: wrap;5
list-style-type: none;6
display: in-line;7
8
}9
10
li:nth-child(3n + 0) {11
color: green;12
}13
14
li:nth-child(5n + 0) {15
color: blue;16
}17
18
li:nth-child(3n + 0):nth-child(5n + 0) {19
background-image: linear-gradient(to right, green 50%, blue 50%);20
background-clip: text;21
text-fill-color: transparent;22
}23
}JavaScript
1
26
26
1
<html lang="en">2
<head>3
<title>FizzBuzz</title>4
</head>5
<body>6
<ul>7
<li></li>8
<li></li>9
<li></li>10
<li></li>11
<li></li>12
<li></li>13
<li></li>14
<li></li>15
<li></li>16
<li></li>17
<li></li>18
<li></li>19
<li></li>20
<li></li>21
<li></li>22
<li></li>23
</ul>24
25
</body>26
</html>Any help would be appreciated.
Advertisement
Answer
add width:fit-content;
JavaScript
1
14
14
1
const unorderedList = Array.from(document.querySelector("ul").children);2
3
function fizzbuzz(elements) {4
for (var i = 0; i < elements.length; i++) {5
var result = "";6
var line = i + 1;7
if (line % 3 === 0) result += "Fizz"; 8
if (line % 5 === 0) result += "Buzz";9
if (result.length ===0) result = line;10
elements[i].innerText = result;11
}12
}13
14
fizzbuzz(unorderedList)JavaScript
1
24
24
1
ul {2
display: flex;3
flex-direction: column;4
flex-wrap: wrap;5
list-style-type: none;6
display: in-line;7
8
}9
10
li:nth-child(3n + 0) {11
color: green;12
}13
14
li:nth-child(5n + 0) {15
color: blue;16
}17
18
li:nth-child(3n + 0):nth-child(5n + 0) {19
background-image: linear-gradient(to right, green 50%, blue 50%);20
background-clip: text;21
-webkit-background-clip: text;22
color:transparent;23
width:fit-content;24
}JavaScript
1
26
26
1
<html lang="en">2
<head>3
<title>FizzBuzz</title>4
</head>5
<body>6
<ul>7
<li></li>8
<li></li>9
<li></li>10
<li></li>11
<li></li>12
<li></li>13
<li></li>14
<li></li>15
<li></li>16
<li></li>17
<li></li>18
<li></li>19
<li></li>20
<li></li>21
<li></li>22
<li></li>23
</ul>24
25
</body>26
</html>