Не удается обратиться ко 2 и 3 элементам контейнера, чтобы сделать их невидимыми. :nth-child()
не помогает. В HTML структуру не могу вмешиваться.
Как это можно решать по-другому? Желательно с помощью стилей.
CSS:
.main-product .product-holder:nth-child(2),
.main-product .product-holder:nth-child(3) {
display: none;
}
HTML:
<div class="vc_row wpb_row vc_row-fluid main-product">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
<div class="wpb_wrapper">
<div data-columns="3" data-sidebar="no_sidebar" class="products-container product-carousel view-grid">
<div class="product-holder"></div>
</div>
<div data-columns="3" data-sidebar="no_sidebar" class="products-container product-carousel view-grid">
<div class="product-holder"></div>
</div>
<div data-columns="3" data-sidebar="no_sidebar" class="products-container product-carousel view-grid">
<div class="product-holder"></div>
</div>
</div>
<!--/ .products-container-->
</div>
</div>