Repeated Series of Number via CSS

Repeated series of number via CSS

One way would to be use CSS counters and reset them every time a h2 is encountered like in below snippet.

The counter-reset property within the h2 selector sets the value of the h2 counter to 1 and that of the h3 counter to 0 (default) everytime a h2 element is encountered.

The counter-increment property within the h3 selector increments the value of the h3 counter everytime a h3 element is encountered.

h2 {  counter-reset: h2 1 h3 0;}h2:before {  content: "1." counter(h2);}h3 {  counter-increment: h3;}h3:before {  content: "1." counter(h2)"." counter(h3);}

<h2>Bananas</h2> <!-- h2 counter = 1, h3 counter = 0 --><h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) --><h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) --><h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) --><h2>Apples</h2> <!-- h2 counter = 1 (reset), h3 counter = 0 (reset) --><h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) --><h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) --><h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) --><h2>Oranges</h2> <!-- h2 counter = 1 (reset), h3 counter = 0 (reset) --><h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) --><h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) --><h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) -->

How to select a range of elements in repeated pattern

This is a commonly-asked question, but I wanted to point out that the reason :nth-child(n+4):nth-child(-n+6) only matches one specific range of elements is that it only provides a single start point (n+4) and a single end point (-n+6). The only elements that can be greater than or equal to 4 and less than or equal to 6 are 4, 5 and 6, so it's impossible to match elements outside of this range using the same selector. Adding more :nth-child() pseudos will only narrow down the matches.

The solution is to think of this in terms of columns, assuming there will always be exactly 3 columns (elements) per row. You have three columns, so you will need three separate :nth-child() pseudos. Elements 4 and 10 from the first column are 6 elements apart, so the argument to all of the :nth-child() pseudos needs to start with 6n.

The +b portion in the An+B expression can either be +4, +5 and +6, or 0, -1 and -2 — they will both match the same set of elements:

li:nth-child(6n+4), li:nth-child(6n+5), li:nth-child(6n+6)
li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2)

You cannot do this with a single :nth-child() pseudo-class, or a single compound selector consisting of any combination of :nth-child() pseudos, because the An+B notation simply doesn't allow such expressions to be constructed that match elements in ranges as described.

How to select the last child of each repeated series of classes using CSS?

You could select each .received_message follwed by a .sent_message and vice-versa, instead, using the selector .received_message + .sent_message, .sent_message + .received_message.

.received_message + .sent_message, .sent_message + .received_message{  margin-top: 20px;}
.container div{  width: 120px;  height: 40px;  border: 1px dashed white;}.received_message{  background: rebeccapurple;}.sent_message{  background: orange;}

<div class="container">   <div class="sent_message"></div>   <div class="sent_message"></div>   <!-- NEED MARGIN -->   <div class="received_message"></div>   <div class="received_message"></div>   <div class="received_message"></div>   <!-- NEED MARGIN -->   <div class="sent_message"></div>   <!-- NEED MARGIN -->   <div class="received_message"></div>   <!-- NEED MARGIN -->   <div class="sent_message"></div>   <div class="sent_message"></div>   <!-- NEED MARGIN --></div>

Repeating the whole css sequence in loop

I hope this is what you are expecting.

setInterval(function(){  document.getElementById("cta").classList.remove("slide-up-fade-in"); document.getElementById("cta").classList.remove("delay-1");        document.getElementById("subtitle").classList.remove("slide-up-fade-in"); document.getElementById("subtitle").classList.remove("delay-2");        document.getElementById("title").classList.remove("slide-up-fade-in");  }, 2900);setInterval(function(){         document.getElementById("title").classList.add("slide-up-fade-in");          document.getElementById("subtitle").classList.add("slide-up-fade-in"); document.getElementById("subtitle").classList.add("delay-2");        document.getElementById("cta").classList.add("slide-up-fade-in"); document.getElementById("cta").classList.add("delay-1");}, 3000);

* {     font-family:'Comfortaa'  }.ad{      margin:0 auto;      overflow:hidden;      position:relative;      color:#3a3a3a;      background: #0E6AAD;      width:300px; height:250px;       background-size: 300px 250px;    }
    .h1-background{      color:white;      text-align:center;    }
    h1{      font-family:'Baloo';      position:relative;      padding:10px;      padding-bottom:0;      font-size:24px;      font-weight:normal;      margin:0;      z-index:1;    }    h2{      position:relative;      padding:0 10px;      font-size:16px;      z-index:1;    }

    button{      padding:10px 20px;      font-size:12px;      background-color:#4285f4;      border:none;      color:white;      position:fixed;      cursor:pointer;      border-radius:50px;        width:180px;      left: 50%;        margin-left: -90px; /*half the width*/        z-index:9999;        top:210px;    }

    .slide-up-fade-in{        animation: slide-up-fade-in ease 0.5s infinite;        animation-iteration-count: 1;        transform-origin: 50% 50%;        animation-fill-mode:forwards; /*when the spec is finished*/        -webkit-animation: slide-up-fade-in ease 0.5s infinite;        -webkit-animation-iteration-count: 1;        -webkit-transform-origin: 50% 50%;        -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/         -moz-animation: slide-up-fade-in ease 0.5s infinite;        -moz-animation-iteration-count: 1;        -moz-transform-origin: 50% 50%;        -moz-animation-fill-mode:forwards; /*FF 5+*/        -o-animation: slide-up-fade-in ease 0.5s infinite;        -o-animation-iteration-count: 1;        -o-transform-origin: 50% 50%;        -o-animation-fill-mode:forwards; /*Not implemented yet*/        -ms-animation: slide-up-fade-in ease 0.5s infinite;        -ms-animation-iteration-count: 1;        -ms-transform-origin: 50% 50%;        -ms-animation-fill-mode:forwards; /*IE 10+*/
        opacity:0;        opacity: 1\9;
    }
    .delay-1{animation-delay: 0.25s;}    .delay-2{animation-delay: 0.5s;}

    @keyframes slide-up-fade-in{        0% {            opacity:0;            transform:  translate(0px,60px)  ;        }        100% {            opacity:1;            transform:  translate(0px,0px)  ;        }    }
    @-moz-keyframes slide-up-fade-in{        0% {            opacity:0;            -moz-transform:  translate(0px,60px)  ;        }        100% {            opacity:1;            -moz-transform:  translate(0px,0px)  ;        }    }
    @-webkit-keyframes slide-up-fade-in {        0% {            opacity:0;            -webkit-transform:  translate(0px,60px)  ;        }        100% {            opacity:1;            -webkit-transform:  translate(0px,0px)  ;        }    }
    @-o-keyframes slide-up-fade-in {        0% {            opacity:0;            -o-transform:  translate(0px,60px)  ;        }        100% {            opacity:1;            -o-transform:  translate(0px,0px)  ;        }    }
    @-ms-keyframes slide-up-fade-in {        0% {            opacity:0;            -ms-transform:  translate(0px,60px)  ;        }        100% {            opacity:1;            -ms-transform:  translate(0px,0px)  ;        }    }

<div class="ad">    <div class="h1-background">     <h1 id="title" class="slide-up-fade-in">Title<h1>   <h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>  </div>  <button id="cta" class="slide-up-fade-in delay-1">   read more  </button> </div>

Ordered list with repeated numbers

Ditch the stock counter and use a custom CSS2 Counter:

ol {  counter-reset: foo 0;  list-style-type: none;}ol li {  counter-increment: foo 1;}ol li.dont-increment {  counter-increment: foo 0;}ol li:before {  content: counter(foo) ".";  /* bells and whistles */  float: left;  width: 2em;  margin-left: -2.5em;  text-align: right;}

<ol>  <li>Coffee</li>  <li>Tea</li>  <li class="dont-increment">Milk</li>  <li>Rice</li>  <li>Bread</li></ol>

Selecting multiple CSS ids with only 1 number changing on each

You can use the attribute selector: [attr*=value]:

[id*=edit-add-to-wishlist] {
    color: red;
}

jsFiddle here - it works

It selects all instances where a id contains edit-add-to-wishlist

[attr*=value]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

MDN documentation on the attribute selector

Repeat nth-child values

You can use .box:nth-child(4n+x) as your selector. This answer explains it well.

.container {  display: grid;  grid-template-columns: 100px 100px 100px 100px;}
.box {  border: 1px solid black;  height: 100px;}
.box:nth-child(4n+1) {  background: red;}
.box:nth-child(4n+2) {  background: blue;}
.box:nth-child(4n+3) {  background: yellow;}
.box:nth-child(4n+4) {  background: pink;}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>    <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>    <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

Repeated Series of Number via CSS