Как выбрать 4-й элемент, который будет расположен после элемента h1

Question

Мне нужно выбрать 4-й элемент div, который помещается после элемента h1, я думаю, что мой путь не профессиональный, есть ли в css указанный селектор для подобных вещей?Обратите внимание, что я должен сделать это без добавления атрибутов id или class в div.

h1+div+div+div+div{
background-color:red; 
}

<h1>css</h1>

<div>just some text here,</div><hr>
<div>just some text here,</div><hr>
<div>just some text here,</div><hr>
<div>just some text here,</div><hr>
<div>just some text here,</div><hr>

Answer 1

Профессиональный способ:

добавьте класс к этому div и выберите классом

 .forthDiv{
       background-color:red; 
 }

 <div class="forthDiv">sometext</div>

непрофессиональный, иногда необходимый способ:

 div:nth-of-type(4){
 background-color:red; 
 }

Answer 2

Вы можете выбрать его, используя nth-of-type и subsequent sibling combinator, чтобы выбрать 4-й div после h1 следующим образом:

h1~div:nth-of-type(4) {
    background-color:red;
}

~ в css называется последующим комбинатором *1013*, который позволяет вам выбрать второй тип элемента, где первый и второй тип элемента имеют общий родительский элемент, а первый элемент предшествует второму типу элемента в документ.

---

jsFiddle: https://jsfiddle.net/AndrewL64/crq43gs5/

---

В тех случаях, когда вы уверены, что между вашими divs нет тегов hr или других элементов, вы можете использовать nth-child вместо этого, но вам придется использовать 5 вместо 4, так как ~ считает h1 тег тоже. Это будет выглядеть примерно так:

h1~div:nth-child(5) {
    background-color:red;
}

---

jsFiddle: https://jsfiddle.net/AndrewL64/crq43gs5/1/