<style>
body{counter-reset:x;}
li::before {
/* Increment "x" by 1 */
counter-increment: x;
content: "😶 " counter(x) ". ";
}
</style>
ref.https://www.w3schools.com/cssref/pr_gen_counter-increment.asp
แยก class li และ ใส่ animation
<style>
/เลขหน้า li/
body{counter-reset:x;}
li.tpsp::before {
/* Increment “x” by 1 / counter-increment: x; content: /“😶”/ counter(x) /“. “/; color: black; background:gold; padding: 2px 6px 2px 5px; / border-radius:25px;*/
margin-right:5px;
/animation เปลี่ยนสีพื้น/
background-color:green;
animation-name: example;
animation-duration: 4s;
}
/animation เปลี่ยนสีพื้น/
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
<li class=”tpsp“> …
Get Category name from Post ID
ทำให้เท่ากัน
display: inline-block;
min-width: 15px;
text-align: center;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
color: #ffffff;
line-height: 1;
vertical-align: baseline;
white-space: nowrap;
background-color: #777777;
border-radius: 10px;ทำสี
ul > li:before {
background-color: red;
margin-right: 5px;
padding: 0 5px;
content: counter(index, decimal);
counter-increment:index;
}
li:first-child {
counter-reset:index;
}
ul li {
list-style: none;
}
ul > li:nth-child(1):before {
background-color: yellow;
}
ul > li:nth-child(2):before {
background-color: blue;
}
ul > li:nth-child(3):before {
background-color: orange;
}
<ul>
<li>..text..</li>
<li>..text..</li>
<li>..text..</li>
</ul>ทำสี สลับ
.link-source {
display:inline;
color:#fff;
}
li:nth-child(odd) .link-source {
background: green;
}
li:nth-child(even) .link-source {
background: red;
}ทำสี ใช้สูตร
ul.four li {background-color: silver;}
ul.four li:nth-child(5n+1),ul.four li:nth-child(5n+3){background-color: black;}
หรือ
add :nth-child() with list when three alternative colors repeat to the list?
ul li:nth-child(3n + 0) {
background: #1A1A1A;
}
ul li:nth-child(3n + 1) {
background: #F7882F;
}
ul li:nth-child(3n + 2) {
background: #F7C331;
}
อื่นๆ https://stackoverflow.com/questions/45365480/change-color-of-nth-child-with-css-or-jquery
<style>
.slick-track .slick-active:nth-child(odd){
background: red;
}
.slick-track .slick-active:nth-child(even){
background: green;
}
</style>
หรือ
<script>
$( "div li:nth-child(even)" ).css('background','green');
$( "div li:nth-child(odd)" ).css('background','red');
</script>
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
/* Selects the second <li> element in a list */
li:nth-child(2) {
color: lime;
}
/* Selects every fourth element
among any group of siblings */
:nth-child(4n) {
color: lime;
}How to make every `<li>` with different background colors?
https://stackoverflow.com/questions/38935055/how-to-make-every-li-with-different-background-colors/38935089$('li').each(function() {
var back = ["green","blue","gray","yellow","orange","purple","black"];
var rand = back[Math.floor(Math.random() * back.length)];
$(this).css('background',rand);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dvi1" class="div1">
<ul id="ul" class="ul">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</div>
</body>
</html>
ป้องกันสีเดียวกันแสดงซ้ำ
var lastPick;
var rand;
$('li').each(function() {
$(this).css('background',randomColor());
});
function randomColor() {
var back = ["green","blue","gray","yellow","orange","purple","pink"];
rand = back[Math.floor(Math.random() * back.length)];
rand==lastPick?randomColor():rand;
lastPick = rand;
return rand;
}Sort of Random Background Colors
https://codepen.io/Sarah_C/pen/GZKOJJ
/* ------------------- */
/* TEMPLATE -- */
/* ----------------- */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);
body {
height: 100%; width: 100%;
margin: 0;
background-color: #333;
color: whitesmoke;
font-size: 16px;
font-family: 'Lato';
}
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; }
p { margin: 15px 0; line-height: 24px; color: gainsboro; }
a { color: dodgerblue; text-decoration: none; border-bottom: 1px dotted; }
a:hover { color: tomato; }
.container {
max-width: 960px;
height: 100%;
margin: 0 auto;
padding: 20px;
}
.flexwrap {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
}
/* ------------------- */
/* PEN STYLES -- */
/* ----------------- */
.rando {
width: 25%;
min-width: 200px;
min-height: 200px;
}
.rando:nth-child(odd) { background-color: tomato; }
.rando:nth-child(even) { background-color: mediumseagreen; }
.rando:nth-child(3n) { background-color: darkcyan; }
.rando:nth-child(4n) { background-color: mediumorchid; }
.rando:nth-child(5n) { background-color: dodgerblue; }
.rando:nth-child(6n) { background-color: darkorange; }
.rando:nth-child(7n) { background-color: firebrick; }
.rando:nth-child(8n) { background-color: lightseagreen; }
/* Just highlight which one wins out */
.rando ul li { width: 100px; padding: 5px 10px; }
.rando ul li:last-of-type { background-color: #333; }
/* Word List */
ul.words { column-count: 2; list-style: none; padding-right: 0;}
ul.words li {
width: 200px;
padding: 5px 10px;
margin-bottom: 5px;
text-transform: capitalize;
}
ul.words li:nth-child(odd) { background-color: tomato; }
ul.words li:nth-child(even) { background-color: mediumseagreen; }
ul.words li:nth-child(3n) { background-color: darkcyan; }
ul.words li:nth-child(4n) { background-color: mediumorchid; }
ul.words li:nth-child(5n) { background-color: dodgerblue; }
ul.words li:nth-child(6n) { background-color: darkorange; }
ul.words li:nth-child(7n) { background-color: firebrick; }
ul.words li:nth-child(8n) { background-color: lightseagreen; }
/* Word List */
ol.list li { text-indent: 20px; }
<div class="container">
<h1>Sort of Random Background Colors</h1>
<p>I'm using nth-child selectors to <b>sort of</b> "randomize" background colors for adjacent elements. If you have a small known number of elements, you can just assign a color individually. But this is meant to get a random effect if you don't know how many elements you'll have, or you don't want to assign colors to a large known number of elements.</p>
<p>I think this could be cool for like a blog theme, dynamically populate navigation, or something. It's barely any code and only uses CSS. And you could "randomize" pretty much any property.</p>
<p>Scroll down for the math.</p>
<div class="flexwrap">
<!-- 1 -->
<div class="rando">
<ul>
<li>odd</li>
</ul>
</div>
<!-- 2 -->
<div class="rando">
<ul>
<li>even</li>
</ul>
</div>
<!-- 3 -->
<div class="rando">
<ul>
<li><s>odd</s></li>
<li>every third</li>
</ul>
</div>
<!-- 4 -->
<div class="rando">
<ul>
<li><s>even</s></li>
<li>every fourth</li>
</ul>
</div>
<!-- 5 -->
<div class="rando">
<ul>
<li><s>odd</s></li>
<li>every fifth</li>
</ul>
</div>
<!-- 6 -->
<div class="rando">
<ul>
<li><s>even</s></li>
<li><s>every third</s></li>
<li>every sixth</li>
</ul>
</div>
<!-- 7 -->
<div class="rando">
<ul>
<li><s>odd</s></li>
<li>every seventh</li>
</ul>
</div>
<!-- 8 -->
<div class="rando">
<ul>
<li><s>even</s></li>
<li><s>every fourth</s></li>
<li>every eighth</li>
</ul>
</div>
<!-- 9 -->
<div class="rando">
<ul>
<li><s>odd</s></li>
<li>every third</li>
</ul>
</div>
<!-- 10 -->
<div class="rando">
<ul>
<li><s>even</s></li>
<li>every fifth</li>
</ul>
</div>
<!-- 11 -->
<div class="rando">
<ul>
<li>odd</li>
</ul>
</div>
<!-- 12 -->
<div class="rando">
<ul>
<li><s>even</s></li>
<li><s>every third</s></li>
<li><s>every fourth</s></li>
<li>every sixth</li>
</ul>
</div>
</div>
<h2>Math</h2>
<p>The mathematical intgeter sequence of the length of the pattern is the <a href="https://oeis.org/A051451">Least Common Multiple where x is a Prime Number</a>. Because after 1, only the prime numbers will have the nth-child(odd) color.</p>
<h3>Length of non-repeating patterns starting with 1 color</h3>
<ol class="list">
<li>1</li>
<li>2</li>
<li>6</li>
<li>12</li>
<li>60</li>
<li>420</li>
<li>840</li>
<li>2,520</li>
<li>27,720</li>
</ol>
<p>As you can see, it gets pretty random pretty fast. This example has 8 colors, so I could have 2,520 items without seeing the pattern repeat.</p>
<h2>Other?</h2>
<p>You could certainly repeat colors in the rule, which would allow adjacent colors, and longer unrepeating patterns with fewer colors. You lose the effect, though if you assign the same color to like even and fourth, or third and sixth.</p>
<h2>List of 100 random words</h2>
<p>From <a href="http://listofrandomwords.com/">List of Random Words</a></p>
<ul class="words"> <li>borne</li>
<li>montale</li>
<li>october</li>
<li>superresponsible</li>
<li>contendingly</li>
<li>mirliton</li>
<li>rubeniste</li>
<li>nonchurchgoer</li>
<li>manroot</li>
<li>underrecompense</li>
<li>eobiont</li>
<li>disbowelling</li>
<li>bucuresti</li>
<li>undecrepit</li>
<li>ordinate</li>
<li>platinocyanide</li>
<li>riffraff</li>
<li>uncasked</li>
<li>electroencephalography</li>
<li>plowshare</li>
<li>resuppress</li>
<li>allegan</li>
<li>stk</li>
<li>worshipless</li>
<li>chinese</li>
<li>antinationalist</li>
<li>rationalized</li>
<li>unsotted</li>
<li>omphale</li>
<li>duodenal</li>
<li>copilot</li>
<li>trainline</li>
<li>sunwards</li>
<li>crimelessness</li>
<li>podgier</li>
<li>nikolayev</li>
<li>pertussis</li>
<li>unrebated</li>
<li>apodictic</li>
<li>catlin</li>
<li>sell</li>
<li>tropospheric</li>
<li>nonremediability</li>
<li>mackerel</li>
<li>littb</li>
<li>deoxyribose</li>
<li>connivance</li>
<li>alif</li>
<li>genuineness</li>
<li>medianly</li>
<li>pyromania</li>
<li>liripoop</li>
<li>kissableness</li>
<li>haircut</li>
<li>superofficious</li>
<li>unepigrammatically</li>
<li>excursive</li>
<li>semeru</li>
<li>repetition</li>
<li>physicist</li>
<li>conductorial</li>
<li>higginsville</li>
<li>darts</li>
<li>galloglass</li>
<li>interpervading</li>
<li>assenter</li>
<li>wolver</li>
<li>copiously</li>
<li>nonexternality</li>
<li>symbolizing</li>
<li>hydroponic</li>
<li>disfiguring</li>
<li>oka</li>
<li>swig</li>
<li>nephritis</li>
<li>pseudorheumatic</li>
<li>ferrotungsten</li>
<li>boardroom</li>
<li>wensleydale</li>
<li>stepsister</li>
<li>topazolite</li>
<li>lighthearted</li>
<li>alk</li>
<li>alcoholometric</li>
<li>nonconsorting</li>
<li>cretin</li>
<li>hebridian</li>
<li>baalitical</li>
<li>trillium</li>
<li>courgette</li>
<li>councilman</li>
<li>overrestrain</li>
<li>gustable</li>
<li>nurture</li>
<li>unregaled</li>
<li>weatherability</li>
<li>theia</li>
<li>cornwallis</li>
<li>overillustrating</li>
<li>tarboosh</li>
</ul>
<p>P.S. After I figured through this, I googled it and found that this isn't a new concept. But it was fun to come across it and figure it out on my own.</p>
</div>
อื่นๆ
Random color from array with Sass
https://codepen.io/davesantos/pen/NNmNvZอื่น
https://www.codegrepper.com/code-examples/css/change+list+style+color
https://levelup.gitconnected.com/generating-a-random-color-in-javascript-spice-up-your-dom-with-a-bit-of-chance-e8b36061421c
comment สุดท้ายใช้ได้ (รอทดสอบ)
Generate random color for every list element
https://stackoverflow.com/questions/26746151/generate-random-color-for-every-list-element