Targeting with nth-of-type and nth-child

By targeting individual or groups of Collection Items inside of Collection Lists, you can style them differently than the rest of the sibling items, breaking the look of your list and achieving more refined designs without having to deal with multiple lists.

Targeting individual items in a Collection List with 3 items

Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)
❮❯ code

:nth-of-type(1) TARGETS THE 1ST SIMILAR ELEMENT OF THE LIST ONLY
.one-item:nth-of-type(1) .one-inner-element { border-color: blue; }

:nth-of-type(2) TARGETS THE 2ND SIMILAR ELEMENT OF THE LIST ONLY
.one-item:nth-of-type(2) .one-inner-element { border-color: orange; }

:nth-of-type(3) TARGETS THE 3RD SIMILAR ELEMENT OF THE LIST ONLY
.one-item:nth-of-type(3) .one-inner-element { border-color: gray; }

Targeting every other items and individual items in a Collection List with 10 items

sit ea est explicabo
quo totam voluptatum vitae
qui nihil quia voluptas
Sed Iste
Consequatur Animi Voluptatum
Nesciunt Repellendus Consequuntur
Nisi Possimus Ut
Nisi Iure
Perspiciatis Nihil Id
Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)
❮❯ code

TARGETS THE 3RD SIMILAR ELEMENT OF THE LIST ONLY
.colitem:nth-of-type(3) .subitem { border-color: black; }

.colitem:nth-of-type(5) TARGETS THE 5TH SIMILAR ELEMENT OF THE LIST ONLY
.colitem:nth-of-type(5) .subitem { border-color: orange; }

.colitem:nth-of-type(3N) TARGETS OVERY OTHER 3RD SIMILAR ELEMENT OF THE LIST
.colitem:nth-of-type(3n) { background-color:blue }

.colitem:nth-of-type(3N-1) TARGETS OVERY OTHER 3RD SIMILAR ELEMENT OF THE LIST AND STARTS AT POSITION 3-1=2
.colitem:nth-of-type(3n-1) { background-color:red }

Targeting the first three elements in a Collection List of 5 elements using :nth-child

sit ea est explicabo
quo totam voluptatum vitae
qui nihil quia voluptas
Sed Iste
Consequatur Animi Voluptatum
Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)
❮❯ code

Targets the first, then second, then 3rd item
.colitem2:nth-child(1), .colitem2:nth-child(2), .colitem2:nth-child(3) {background-color:blue}

Targeting ALL the items BUT the 3 first in a Collection List of 5 elements using :nth-child

sit ea est explicabo
quo totam voluptatum vitae
qui nihil quia voluptas
Sed Iste
Consequatur Animi Voluptatum
Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)
❮❯ code

Targets all the items but starts at the 4th
.colitem3:nth-child(1n+4) {background-color:blue}

Targetting Odd and Even items in a Collection List

sit ea est explicabo
sit ea est explicabo

Sed molestiae distinctio porro. Ex

quo totam voluptatum vitae
quo totam voluptatum vitae

Repellendus reprehenderit sit officiis et repellat non est. Sit commodi asperiores ut blanditiis. Eaque voluptas totam maxime est

qui nihil quia voluptas
qui nihil quia voluptas

Qui vel nihil est distinctio. Qui quisquam ut dolorem est consequuntur nemo reprehenderit est autem

Sed Iste
Sed Iste

Non quo nulla perspiciatis non natus doloribus reiciendis minima. Numquam voluptate sunt non in quas quia. Qui tempora e

Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)
❮❯ code

TARGETS THE IMAGE NAMED .OEDEMO-IMAGE INSIDE OF EVERY EVEN .COLITEM-OEDEMO ELEMENT, AND ADDS THE FLEXBOX CHILDREN PROPERTY ORDER:1 TO PASS IT TO THE RIGHT
.colitem-oedemo:nth-child(even) .oedemo-image {order: 1}

Using Nth-child to target only one item in a list

Here, we use nth-child to target the first item of the Collection List, which is a flex child, and pass it to width 100%, so that it's styled differently from the rest of the items.

sit ea est explicabo
sit ea est explicabo

Sed molestiae distinctio porro. Ex

quo totam voluptatum vitae
quo totam voluptatum vitae

Repellendus reprehenderit sit officiis et repellat non est. Sit commodi asperiores ut blanditiis. Eaque voluptas totam maxime est

qui nihil quia voluptas
qui nihil quia voluptas

Qui vel nihil est distinctio. Qui quisquam ut dolorem est consequuntur nemo reprehenderit est autem

Sed Iste
Sed Iste

Non quo nulla perspiciatis non natus doloribus reiciendis minima. Numquam voluptate sunt non in quas quia. Qui tempora e

Consequatur Animi Voluptatum
Consequatur Animi Voluptatum

Odio dignissimos aut impedit id asperiores error. Id enim perferendis aliquid ea molestiae nulla neque. Nesciunt molestiae et consequatur o

Nesciunt Repellendus Consequuntur
Nesciunt Repellendus Consequuntur

Sapiente in qui consequatur dolorem. Laboriosam repellendus praesentium dolorem voluptas. Facilis consequatur ipsa qui omnis aliquam rei

Nisi Possimus Ut
Nisi Possimus Ut

Iste illo maiores veritatis vel voluptatem libero adipisci nobis. Est asperiores esse. Odit debitis optio qui. Laudantium aut dolore veli

Nisi Iure
Nisi Iure

Dolorem sunt nemo vitae sapiente enim et vel. Eum pariatur beatae quia rerum. Deleniti ducimus enim. Fugit nihil repudiandae et. Offic

Perspiciatis Nihil Id
Perspiciatis Nihil Id

Explicabo nihil omnis soluta cumque autem fugiat rem et non. Vel est ab magnam reiciendis illum. Aperiam ut quis id la

Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)
❮❯ code

TARGETS the first item and pass it to width:100%
.colitem-targetone:nth-child(1) {width:100%}