Некорректно работает :nth-child

[olorin]

Доброго времени суток. Возникла проблема с :nth-child, а именно то что есть 3 чекбокса и к каждому из них через :before присвоены разные изображения. Но работают не так как нужно. Эта вся беда на странице оформления заказа (способ доставки) здесь. Вот сам код css я изменял только его.(с tpl файлами беда, по какой то причине я не могу их изменять, вернее любые изменения не отображаются в браузере и дело не в кеше):

 

#simplecheckout_shipping .simplecheckout-block-content p:first-child:before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 74px;
	width: 130px;
	top: -34px;
	left: -22px;
	z-index:300;
	background-image: url(/image/catalog/yarninbob/new-post.png);
}



#simplecheckout_shipping .simplecheckout-block-content p:nth-child(2n):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 59px;
	width: 60px;
	top: -28px;
	left: 23px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/pickup.png);
}


#simplecheckout_shipping .simplecheckout-block-content p:last-child:before{
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 51px;
	width: 96px;
	top: -22px;
	left: -3px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/in-time.png);
}

я пробовал разные вариации с nth-child и в итоге почему то первые два чекбокса(а точнее <p>) считаются как 2-й элемент. или последние два как 3-й. Вообщем путаница полнейшая. Прошу помочь разобраться с этим

[pimur]

2 часа назад, olorin сказал:

Но работают не так как нужно

тогда напишите как нужно, точнее что вы хотите с ними сделать

 

2 часа назад, olorin сказал:

с tpl файлами беда, по какой то причине я не могу их изменять

обновить модификаторы пробовали?

[pimur]

#simplecheckout_shipping .simplecheckout-block-content p:nth-child(4):before,
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(3):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 59px;
	width: 60px;
	top: -28px;
	left: 23px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/pickup.png);
}


#simplecheckout_shipping .simplecheckout-block-content p:nth-child(5):before,
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(6):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 51px;
	width: 96px;
	top: -22px;
	left: -3px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/in-time.png);
}

 

[Dotrox]

2 часа назад, olorin сказал:

в итоге почему то первые два чекбокса(а точнее <p>) считаются как 2-й элемент. или последние два как 3-й.

Вы неправильно понимаете механизм работы nth-child. Так, как вы ожидаете, работает nth-of-type, а nth-child считает не только теги параграфа, а вообще все теги (но применяет стили только к тегам p).

У вас там теги p перемешиваются с другими тегами и они все участвуют в счётчике.

[Exploits]

попробуйте nth-of-type http://htmlbook.ru/css/nth-of-type

[olorin]

9 часов назад, pimur сказал:

#simplecheckout_shipping .simplecheckout-block-content p:nth-child(4):before,
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(3):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 59px;
	width: 60px;
	top: -28px;
	left: 23px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/pickup.png);
}


#simplecheckout_shipping .simplecheckout-block-content p:nth-child(5):before,
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(6):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 51px;
	width: 96px;
	top: -22px;
	left: -3px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/in-time.png);
}

Спасибо, помогло! Но я так и не понял почему 4,3 и 5,6? 

 

[olorin]

Спасибо всем за помощь