Как стилизовать первый столбец только в строке динамической начальной загрузки

Question

Я создаю корзину для покупок на основе Opencart. Ниже приводится основная часть кода в файле Category.tpl, который обновляется с

.

  <div class="row">
    <?php foreach ($products as $product) { ?>
    <div class="product-layout product-list col-xs-12">
      <div class="product-thumb">

        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a> </div>
        <div>

А ниже это css, который он генерирует

<div class="row">
              <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12">
                 <div class="product-thumb">

             <div class="image"><a href="http://rangawoods.tryfcomet.com/index.php?route=product/product&amp;path=78&amp;product_id=194"><img src="http://rrrwoods.com/image/cache/catalog/Door/SMD-001-500x500.jpg" alt="SMD-001" title="SMD-001" class="img-responsive"></a> </div>


        <div>

Теперь мне нужно стилизовать первый столбец только в созданной строке. Как я могу это сделать? Я приложил изображение для быстрой ссылки.

Answer 1

Попробуйте

.row div[class^="col"]:first-child {
    border: 3px solid black;
}

Пример

.row div[class^="col"]:first-child {
    border: 3px solid black;
}

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    one
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    two
  </div>
</div>

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    Three
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    Four
  </div>
</div>

Обновление: с вашим визуализированным html Я думаю, что это невозможно, у вас есть все столбцы внутри строки. В перспективе Bootstrap это будет работать, но вы не можете настроить таргетинг на все 1-й элемент, который видит пользователь на странице, потому что он отличается разрешением экрана.

Если вам нужно просто оформить первый столбец, вы можете использовать этот код

.row .product-layout:first-child {
    border: 3px solid red;
}

Answer 2

Вы должны попробовать первый дочерний класс для создания границы, например

.row .col-lg-3:first-child{
    border:1px solid red;
}