Как сделать такой вид?

Question

[Kirill2501]

Народ, привет. Как можно это реализовать как показано на фотке? Делал через :nth-child(2n), но почему-то не идет, зато если сделать именно на блок - работает.

Comments

[Андрей Суровцев]

скинь код

[Pashok Doom]

.block:nth-child(even) .title {background: #f00}
.block:nth-child(even) .btn {background: #f00}

[Kirill2501]

surovtsevandrew,

<div class="elementor-element elementor-column elementor-col-25">
			    <div class="elementor-column-wrap  elementor-element-populated">
					<div class="elementor-widget-wrap">
				        <div class="elementor-element elementor-element-2k2ndwc elementor-widget">
			                 <div class="dtr-packagebox">
							    <figure class="dtr-packagebox-img">фотка</figure>
							    <span class="dtr-packagebox-tagline">статус</span>
							    <div class="dtr-packagebox-content">
							        <h5 class="dtr-packagebox-title">описание</h5>
							        <a class="themebtn dtr-packagebox-btn" href="ссылка">Далее</a>
							    </div>
							 </div>
				        </div>
					</div>
			    </div>
		    </div>

[Андрей Суровцев]

Kirill2501, секунду

[Kirill2501]

surovtsevandrew, хорошо

[Илья]

Nth-child надо переменить к элементам li

[Андрей Суровцев]

Kirill2501,

.elementor-column-wrap.elementor-element-populated:nth-child(even) .elementor-widget-wrap .elementor-element.elementor-element-2k2ndwc.elementor-widget .dtr-packagebox .dtr-packagebox-content a.themebtn.dtr-packagebox-btn {
color: #c54262;
}
.elementor-column-wrap.elementor-element-populated:nth-child(odd) .elementor-widget-wrap .elementor-element.elementor-element-2k2ndwc.elementor-widget .dtr-packagebox .dtr-packagebox-tagline {
color: #c54262;
}

Исходя из кода показанного выше, на 1 и 3 статусе фиолетовый как со скрине и на кнопках 2 и 4 "далее"

[Kirill2501]

surovtsevandrew, лучший, спасибо

[Андрей Суровцев]

.elementor-column-wrap.elementor-element-populated:nth-child(even) .elementor-widget-wrap .elementor-element.elementor-element-2k2ndwc.elementor-widget .dtr-packagebox .dtr-packagebox-content a.themebtn.dtr-packagebox-btn {
color: #c54262;
}
.elementor-column-wrap.elementor-element-populated:nth-child(odd) .elementor-widget-wrap .elementor-element.elementor-element-2k2ndwc.elementor-widget .dtr-packagebox .dtr-packagebox-tagline {
color: #c54262;
}

Исходя из кода показанного выше, на 1 и 3 статусе фиолетовый как со скрине и на кнопках 2 и 4 "далее"

[Андрей Суровцев]

Kirill2501, пожалуйста

[Kirill2501]

surovtsevandrew, хотел отметить, что-то не найду где это

[Андрей Суровцев]

Kirill2501, ничего страшного

Answer 1

[chaos1909]

вам ненужно так делать это на макете показаны эффекты при наведении при ховере у вас должна изменятся цвет кнопки фона категорий и появляться надпись на картинке

Comments

[Kirill2501]

Как бы это мой макет, уже реализовали.. Ховер здесь вообще не причем, здесь чередование кнопок