Почему комбинация селекторов не срабатывает для третьего div'a?

Question

[Maxwiwi]

<div class="good">
			<span class="price">$45.00</span><br>
			<img src="img/Nike-Air-Max-90-Cork-30anniv.png"" alt="cross" class="img-cross"><br>
			<span class="sex">Men</span><br>
			<span class="brand">Converse BP <br> Seude Blue</span><br>
			<span class="article">#1198914194</span>
		</div>
		<div class="good">
			<span class="price">$45.00</span><br>
			<img src="img/Nike-Air-Max-90-Cork-30anniv.png"" alt="cross" class="img-cross"><br>
			<span class="sex">Men</span><br>
			<span class="brand">Converse BP <br> Seude Blue</span><br>
			<span class="article">#1198914194</span>
		</div>
		<div class="good">
			<span class="price">$45.00</span><br>
			<img src="img/Nike-Air-Max-90-Cork-30anniv.png"" alt="cross" class="img-cross"><br>
			<span class="sex">Men</span><br>
			<span class="brand">Converse BP <br> Seude Blue</span><br>
			<span class="article">#1198914194</span>
		</div>
		<div class="good">
			<span class="price">$45.00</span><br>
			<img src="img/Nike-Air-Max-90-Cork-30anniv.png"" alt="cross" class="img-cross"><br>
			<span class="sex">Men</span><br>
			<span class="brand">Converse BP <br> Seude Blue</span><br>
			<span class="article">#1198914194</span>
		</div>

main{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
	div.goods{
		width:60vw;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
		-ms-flex-direction: row;
		-o-flex-direction: row;
		flex-direction: row;
		
		div.good{
			
			width: 15vw;
			height: 8vh;
			img{
				width: 10vw;
				height: 8vh;
			}
			span{
				display: inline-block;
				margin: 5px;
			}
			span.price{
				font-size: 20px;
				color:$dark-gray;
			}
			span.sex{
				font-weight: bold;
				font-size: 22px;
				color:$dark-gray;
				text-transform: uppercase;
			}
			span.brand{
				color:$dark-gray - 50;
			}
			span.article{
				font-size: 10px;

			}
		}
		div.good:not(:first-of-type)~:not(:nth-of-type(4)){/*ТУТ НЕ РОБИТ*/
			margin-top:150px;
		}
		
	}
}

Comments

[Destell]

Тильду уберите

[Maxwiwi]

Destell, Это комбинация такая,чтоб от nth-of-type(1) До 4

[Destell]

Maxwiwi, этот код находит блоки, не являющиеся first-of-type и от них начинает искать соседние блоки, которые не nth-of-type(4), естественно оно не работает. Если оно вообще работает так, как я написал, а не еще более извращенно.

Здесь все расписано.

И не советую использовать селекторы вида div.good или span.article, потом их переопределять тот еще ад.

Answer 1

[Anton fon Faust]

Почитайте что вы населекторили.
div.good:not(:first-of-type)~:not(:nth-of-type(4))
Дословно:
все, что не является четвертым элементом, который является соседом всего, что не является первым элементом родителя, но у чего есть класс .good который является div.
Мне даже сложно придумать код, который подойдет под этот запрос.
Комбинации от... до строятся иначе.
jsfiddle.net/anton4ept/osxyedpb

div.good:nth-of-type(-n+4):not(:nth-of-type(1)) -этот селектор применит стиль для 2, 3 и 4 элементов. (со второго по четверный включительно).
Надо с 1 по 4й: div.good:nth-of-type(-n+4)