Удаление линии-разделителя у первого элемента

Question

Действовал согласно Подсвечивание карточки товара. В результате получил

Но возникла проблема: Как убрать линию-разделитель сверху у 1-ого товара?

Пытался в css прописать

// такой же код, что и код выше - только для черных пунктов меню типа Моноблоки 
let categoryflag = '';
//let monoblocks=document.querySelector('#monoblocks');
console.log('monoblocks count =', $('#monoblocks').length);
/*$('#monoblocks')*/
$('#CatalogMenuRight').on('click', '#monoblocks', function(event) {
  event.preventDefault();
  console.log('Checkmenuitem');

  subcategoryflag = event.target.innerHTML;
  console.log(subcategoryflag);
  let windowclose = document.querySelector('#dropdownwindow');
  windowclose.style.display = "none";

  $.ajax({
    method: 'POST',
    url: '../php/ajaxsubcategory1.php',
    cache: false,
    data: {
      subcategoryflag: subcategoryflag
    },
    dataType: 'json',
    complete: function(data) {
      console.log(data.header);
      console.log(data.countrecords);
    },
    success: function(data) {
      console.log('check');
      console.log(data);
      $('.rightmenu').html(data.result.msg);
      //displayProductItems(data);
      let centeroutput = '<div id=\"topcenterarea\">' + '<h1>' + data.result.header + ' ' + data.result.countrecords + ' товара' + data.output[0]['screendiagonal'] + '</h1>' + '</div>';


      productcardsoutput = '';
      // productcard='<div class="ProductCardBlock">';


      for (let i = 0; i < data.result.countrecords; i++) {
        productcard = '<div class="ProductCardBlock">';
        productcard += '<div class="dynamic ProductImage">';
        productcard += '<div id="ImageWrapper">';
        productcard += '<img class="ProductPicture" src=' + '"../images/' + data.output[i]['imagepath'] + '">';
        productcard += '</div>';
        productcard += '</div>';
        productcard += '<div class="dynamic ProductDescription">';
        productcard += '<div class="ProductName">' + data.output[i]['monoblockname'] + ', ' + data.output[i]['color'] + '</div>';
        productcard += '<div class="ProductScreenParamsWrapper">' + '<span class="text">' + 'Диагональ/разрешение ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductScreenParams">' + ' ' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.' + '</span>' + '</div>';
        productcard += '<div class="ProductCpuTypeWrapper">' + '<span class="text">' + 'Тип процессора ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductCpuType">' + ' ' + data.output[i]['cputype'] + '</span>' + '</div>';
        productcard += '<div class="ProductCpuFrequencyWrapper">' + '<span class="text">' + 'Частота процессора ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductCpuFrequency">' + ' ' + data.output[i]['frequency'] + '</span>' + '</div>';
        productcard += '<div class="ProductRAMWrapper">' + '<span class="text">' + 'Оперативная память (RAM) ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductRAM">' + ' ' + data.output[i]['ramsize'] + '</span>' + '</div>';
        productcard += '<div class="ProductVideoCardWrapper">' + '<span class="text">' + 'Графический контроллер ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductVideoCard">' + ' ' + data.output[i]['videocard'] + '</span>' + '</div>';

        if (data.output[i]['memorytype'] == 'SSD') {
          productcard += '<div class="ProductDisksAndDrivesWrapper">' + '<span class="text">' + 'Объем SSD ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductDisksAndDrives">' + ' ' +
            data.output[i]['sizememorydata'] + '</span>' + '</div>';
        } else if (data.output[i]['memorytype'] == 'HDD') {
          productcard += '<div class="ProductDisksAndDrivesWrapper">' + '<span class="text">' + 'Объем HDD ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductDisksAndDrives">' + ' ' + data.output[i]['sizememorydata'] + '</span>' + '</div>';
        };

        productcard += '</div>';
        productcard += '<div class="dynamic ProductBuyPart">' + '<div class="ProductPrice">' +
          data.output[i]['price'] + '</div>' + '<button type="submit" class="ProductAddToBasket" value="В корзину">Купить</button>' + '</div>';

        productcard += '</div>';
        productcardsoutput += productcard;
      }

      centeroutput += productcardsoutput;


      $('.centerarea').html(centeroutput);



    }
  })
})

.ProductCardBlock:not(:first-child) {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  height: 195px;
  border-top: 1px solid #dfdfe1;
  /*position: relative;*/
}

.ProductCardBlock:nth-child(1) {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  height: 195px;
  border-top: 1px solid #fff;
  /*position: relative;*/
}

.ProductCardBlock:hover {
  z-index: 1;
  box-shadow: 0 5px 25px rgb(30, 31, 33, 12%);
  border-top-color: transparent;
}

<div class="contentpart">
    <div class="leftmenu">
    </div>

    <div class="centerarea">
    </div>

    <div class="rightmenu">
    </div>
</div>

но это не помогло. В файле ../php/ajaxsubcategory1.php происходит чтение из базы данных отображаемых товаров и в js файле происходит (по нажатию на кнопку Каталог товаров) вывод на экран считанных товаров.

Answer 1

Вы в принципе не привели примера HTML разметки, потому приходится только гадать, что там у Вас. Постараюсь привести простой пример, для наглядности, как это работает:

.product-list {
  list-style: none;
}

.product-list__item:not(:first-child) {
  border-top: 1px solid #ededed;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title></title>
</head>
<body>
</body>
  <ul class="product-list">
    <li class="product-list__item">
      <h3>Test</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </li>
    <li class="product-list__item">
      <h3>Test</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </li>
    <li class="product-list__item">
      <h3>Test</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </li>
  </ul>
</html>

БЛОГ НА HUSL

Удаление линии-разделителя у первого элемента

Ответы (1 шт):