Как решить проблему вложенности :nth-of-type()?

Question

[fuckingawesomenigga]

<section class="main">
	<div>
		<div class="rating">
		</div>
	</div>
	<div>
		<div class="rating">
		</div>
	</div>
	<div>
		<div class="rating">
		</div>
	</div>
	<div>
		<div class="rating">
		</div>
	</div>
<section>

.main {
  counter-reset: heading;
}

.rating:before {
  position: absolute;
  counter-increment: heading;
  content: counter(heading);
}

.rating:nth-of-type(1) {
  color:#000;
}

.rating:nth-of-type(2) {
  color:#fff;
}

Я так понимаю не работает из-за вложенности, работает :nth-of-type(1) на все элементы.
Поскажите, есть ли способ решить проблему, кроме выноса из дива?

Comments

[Lord_Dantes]

.main > div:nth-child(1n+1) .rating{}

[Rustam Bainazarov]

У вас так и не должно работать, т. к. .rating — единственный элемент в родительском блоке. А выше по коду CSS идти не умеет.

Надо так:

Answer 1

[Андрей Гончаров]

Есть. Стилизовать через

.main>div:nth-of-type(n) .rating{
  xxx
}

Comments

[fuckingawesomenigga]

всё так же, работает для всех элементов :с

[Андрей Гончаров]

fuckingawesomenigga, не верю! за место n, конечно, надо проставить номер элемента нужного.

[fuckingawesomenigga]

Андрей Гончаров,

вот конкретней разметка

<section class="main">
	<div class="container">
		<div class="row item">
			<div class="col-md-1 rating"></div>
		</div>
		<div class="row item">
			<div class="col-md-1 rating"></div>
		</div>
		<div class="row item">
			<div class="col-md-1 rating"></div>
		</div>
		<div class="row item">
			<div class="col-md-1 rating"></div>
		</div>
	</div>
</section>

я указал номер, не всё так плохо)

[Андрей Гончаров]

fuckingawesomenigga,

.main .item:nth-of-type(n) .rating{
  xxx
}

Answer 2

[Дмитрий]

.main .item:nth-of-type(1) .rating{
  color:#000;
}

.main .item:nth-of-type(2) .rating{
  color:#fff;
}

Comments

[fuckingawesomenigga]

вот конкретней разметка

<section class="main">
	<div class="container">
		<div class="row item">
			<div class="col-md-1 rating"></div>
		</div>
		<div class="row item">
			<div class="col-md-1 rating"></div>
		</div>
		<div class="row item">
			<div class="col-md-1 rating"></div>
		</div>
		<div class="row item">
			<div class="col-md-1 rating"></div>
		</div>
	</div>
</section>

всё ещё применяется ко всем эл-ам