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”:
li:nth-child(3n + 0):nth-child(5n + 0) {
background-image: linear-gradient(to right, green 50%, blue 50%);
background-clip: text;
text-fill-color: transparent;
}
I tried modifying the display property on the parent <ul> to “inline” but that doesn’t fix the problem:
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
list-style-type: none;
display: in-line;
}
I’m trying to do this in pure css without modifying my html/js. Here’s the code:
const unorderedList = Array.from(document.querySelector("ul").children);
function fizzbuzz(elements) {
for (var i = 0; i < elements.length; i++) {
var result = "";
var line = i + 1;
if (line % 3 === 0) result += "Fizz";
if (line % 5 === 0) result += "Buzz";
if (result.length ===0) result = line;
elements[i].innerText = result;
}
}
fizzbuzz(unorderedList)ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
list-style-type: none;
display: in-line;
}
li:nth-child(3n + 0) {
color: green;
}
li:nth-child(5n + 0) {
color: blue;
}
li:nth-child(3n + 0):nth-child(5n + 0) {
background-image: linear-gradient(to right, green 50%, blue 50%);
background-clip: text;
text-fill-color: transparent;
}
}<html lang="en">
<head>
<title>FizzBuzz</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>Any help would be appreciated.
Advertisement
Answer
add width:fit-content;
const unorderedList = Array.from(document.querySelector("ul").children);
function fizzbuzz(elements) {
for (var i = 0; i < elements.length; i++) {
var result = "";
var line = i + 1;
if (line % 3 === 0) result += "Fizz";
if (line % 5 === 0) result += "Buzz";
if (result.length ===0) result = line;
elements[i].innerText = result;
}
}
fizzbuzz(unorderedList)ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
list-style-type: none;
display: in-line;
}
li:nth-child(3n + 0) {
color: green;
}
li:nth-child(5n + 0) {
color: blue;
}
li:nth-child(3n + 0):nth-child(5n + 0) {
background-image: linear-gradient(to right, green 50%, blue 50%);
background-clip: text;
-webkit-background-clip: text;
color:transparent;
width:fit-content;
}<html lang="en">
<head>
<title>FizzBuzz</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>