I am attempting to display the fizz buzz function in an unordered list, with each word being a different color ('fizz'-- green, 'buzz'--blue) as shown here:
https://i.sstatic.net/Yvdal.jpg
I have successfully displayed "fizz" and "buzz" in their respective colors individually, but when it comes to displaying the "fizzbuzz" line, the entire background of the <li> is divided between green and blue instead of only coloring the individual words.
Below is 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 attempted changing the display property on the parent <ul> to "inline", but that did not solve the issue:
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
list-style-type: none;
display: in-line;
}
I am trying to achieve this using only css without altering 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 assistance would be greatly appreciated.