How to match from beginning in css nth-of-child selector?

I want to select the first div until div number three.

So I use this selector:

div:nth-of-type(1) ~ div:nth-of-type(3) {
  border:1px solid red;
}

But it only match the 3 div. why? how to match from the begining until 3?

div:nth-of-type(1) ~ div:nth-of-type(3) {
  border:1px solid red;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

>Solution :

You can use :nth-child selector with -n+X pattern, where X is first X number of elements you need to target.

div:nth-child(-n+3) {
  border:1px solid red;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>