@Maxwiwi

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

5b7527d7c44df074103372.png
<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;
		}
		
	}
}
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
Почитайте что вы населекторили.
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)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы