Блог

Главная - Вопросы по программированию - Первый элемент встроенного блочного CSS-селектора

Первый элемент встроенного блочного CSS-селектора

#css #css-selectors

#css #css-селекторы

Вопрос:

Я ищу селектор CSS для первого (или не первого) элемента в строке.

На следующем изображении у меня 12 блоков, разделенных горизонтально серой линией, эта строка не отображается в первом элементе каждой строки, это ожидаемый результат.

введите описание изображения здесь

Есть ли способ выбрать первый элемент каждой строки с помощью CSS?

Для меня подходит любой альтернативный способ сделать это с помощью CSS, даже flex, grid или float.

 div{
    width: 100px;
    height: 70px;
    margin: 5px 0;
    padding: 5px;
    display: inline-block;
}
div:not(:first-child){
    border-left: 3px solid #999;
} 
 <div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>

Ответ №1:

Вы можете использовать отрицательное поле слева, чтобы скрыть эту строку:

 .wrapper > div {
  width: 100px;
  height: 70px;
  margin: 5px 0;
  padding: 5px;
  display: inline-block;
  border-left: 3px solid #999;
  margin-left: -3px;
  margin-right: 3px; /*to rectify the removed margin*/
}


/*hide the overflow on the parent element*/
.wrapper {
  overflow: hidden;
} 
 <div class="wrapper">
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
</div>

Ответ №2:

Этот вопрос немного сложный, потому что вы не можете настроить таргетинг на элемент, если не знаете порядок. Тем не менее, вы могли бы добиться небольшой хитрости с отрицательными полями и overflow: hidden свойством для родительского элемента. Если это нормально, то вы могли бы попробовать это:

 .wrapper {
  overflow: hidden;
}

.inner-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-left: -3px;
}

.box {
  padding: 10px;
  border-left: 3px solid #999;
  flex: 0 0 70px;
  height: 100px;
} 
 <div class="wrapper">
  <div class="inner-wrap">
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
  </div>
</div>
Метки: