Выберите первого брата с определенным классом после элемента - PullRequest
Новая
       0

Выберите первого брата с определенным классом после элемента

0 голосов
/ 11 апреля 2020

Этот вопрос меня озадачивает, потому что он кажется таким простым, и все же я не могу решить проблему.

Чтобы дать немного контекста, я готовлю небольшое приложение HTML, которое генерирует список div на основе фильтров, выбранных конечным пользователем. Затем конечный пользователь может вручную удалить элементы, которые ему не интересны, в основном, добавив к ним класс «скрытый» через JavaScript.

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

<div>...</div>
<div>...</div>
<div class="bigborders">...</div>
<div class="hidden">...</div>
<div class="hidden">...</div>
<div class="hidden">...</div>
<div class="bigborders">...</div>
<div>...</div>
<div class="bigborders">...</div>
<div>...</div>
<div>...</div>

И ради этого давайте добавим немного CSS правил, упрощенных до костей: 

.hidden {
    display: none;
}
.bigborders {
    border-top: 2px solid #AAAAAA;
    border-bottom: 2px solid #AAAAAA;
}

https://jsfiddle.net/3tzrsq1d/1/

Я бы хотел выбрать только первый .bigborders после другого .bigborders, игнорируя все скрытые элементы div между ними, чтобы удалить его верхнюю границу, но единственными селекторами для братьев и сестер являются +, который выбирает элемент, следующий сразу за ним (но это верно только на экране, а не в коде), и ~, который выбирает каждый следующий элемент (но мне нужен только первый, а не каждый). Я также экспериментировал с :first-of-type и nth-of-type, но этот псевдокласс работает в отношении родительского элемента первого .bigborders, а не самого этого элемента.

Есть ли другой способ, которым я могу ' не видишь?

Ответы [ 3 ]

1 голос
/ 12 апреля 2020

Слишком сложное первое решение.

Сначала примените верхнюю границу ко всем элементам, 

 border-top: 1px solid;

Теперь только у последнего элемента отсутствует нижняя граница, мы можем исправить это использование :last-child

Затем примените соответствующие границы к .bigBorders элементам. 

border-top: 3px solid blue;
border-bottom: 2px solid blue;

Почему 2px внизу? Поскольку другие элементы имеют 1px верхнюю границу, сумма будет быть 3px, который будет равен верхней границе .bigBorders.

Это все для выравнивания всех границ.

Теперь мы применяем margin-bottom: -3px; к .bigBorders, это повлияет только на элементы внизу, как будто мы уменьшаем высоту элемента над ними.

3px равно ширине границы элемента выше, что приведет к перекрытию границ.

И да, маржинальный трюк будет влиять на контент, но пока значения невелики, все должно быть в порядке. 

.hidden {
    display: none;
}


div>div {
    border-top: 1px solid;
    padding: 5px;
}

div>div:last-child {
    border-bottom: 1px solid;
    
}

.bigborders {
    border-top: 3px solid;
    border-bottom: 2px solid;
    margin-bottom: -3px;
    background: orange;
}
<div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="bigborders">bigborders</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="bigborders">bigborders</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="bigborders">bigborders </div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders </div>
  <div class="bigborders">bigborders </div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders </div>
  <div class="bigborders">bigborders </div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders </div>
  <div class="bigborders">bigborders </div>
  <div>placeholder</div>
</div>

Или мы также можем упростить это так, если вы не заботитесь о равномерной ширине, но можете использовать :last-child :first-child нацелиться на первого и последнего ребенка и настроить их границы индивидуально. 

.hidden {
  display: none;
}

div>div {
  border: 1px solid;
  padding: 5px;
}

.bigborders {
  border-top: 3px solid;
  border-bottom: 4px solid;
  margin-bottom: -3px;
  background: orange;
}
<div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="bigborders">bigborders</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="bigborders">bigborders</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="bigborders">bigborders </div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders </div>
  <div class="bigborders">bigborders </div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders </div>
  <div class="bigborders">bigborders </div>
  <div>placeholder</div>
  <div>placeholder</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>placeholder</div>
  <div class="bigborders">bigborders </div>
  <div class="bigborders">bigborders </div>
  <div>placeholder</div>
</div>

Примечание: я использовал оболочку для обертывания элементов, потому что фрагмент кода добавляет скрытый div, который ломает селектор :last-child

0 голосов
/ 11 апреля 2020

Мне удалось найти решение, хотя оно немного странное и требует некоторой гибкости. Все вращается вокруг того факта, что границы не обязательно должны быть границами CSS. Цветной div с высотой 3px между двумя другими div также может быть границей. 

<div>...</div>
<div>...</div>
<div class="bigborder"></div>
<div>...</div>
<div class="bigborder"></div>
<div class="hidden">...</div>
<div class="hidden">...</div>
<div class="hidden">...</div>
<div class="bigborder"></div>
<div>...</div>
<div class="bigborder"></div>
<div>...</div>
<div>...</div>

И правило CSS: 

.bigborder {
    height: 3px;
    background-color: #AAAAAA;
    margin-top: -3px;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

https://jsfiddle.net/4h2j6z9o/

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

Я подожду пару дней, чтобы отметить это как решение, на случай, если что-то получше поворачивается.

0 голосов
/ 11 апреля 2020

Не беспокойтесь о визуально смежных .bigborders. Просто вернитесь в HTML и оцените, что вы действительно были очень близки к решению. Вместо этого используйте соседний селектор братьев и сестер + с классом .hidden. Смотрите код CSS ниже. 

.hidden {
    display: none;
}
.bigborders {
    border: 2px solid #AAAAAA;
}
.hidden+.bigborders {
    border-top: 0px;
    border-bottom: 2px solid #AAAAAA;
}

Я применил границу с 4 сторон для класса .bigborders. Но если предшествующий элемент .hidden, он удаляет верхнюю границу, чтобы избежать проблемы толщины. Конечно, это не сработает, если у вашего первого элемента есть скрытый класс, а затем следующий - .bigborders - но надеюсь, что это какой-то старт.

JSFiddle link .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...