使用CSS将顶部和底部边框添加到一组选定元素 [英] Adding top and bottom border to a group of selected elements using CSS

问题描述

所以我有一个网格的搜索结果。这些结果是可选的，当选择它们时，我将 class ='selected'添加到它们。

So I have a grid of search results. These results are selectable and when they are selected, I add the class='selected' to them.

可以有多组结果（通过命令/ Ctrl键单击行完成）。按结果组我的意思是选择连续的元素。我想要做的是，只为选定结果的任何给定组的第一个添加顶部边框，并且只有给定组的最后一个项目的底部边框。

There can be multiple groups of results (accomplished by command/ctrl-clicking rows). By groups of results what I mean is consecutive elements that are selected. What I want to do is, add a top border to only the first of any given group of selected results, and a bottom border to only the last item of a given group.

有一个很好的方法来做到这一点与CSS？或者我要在每个组中应用 .first 和 .last 吗？

Is there a good way to do this with CSS? Or am I going to have to apply .first and .last within each group?

例如，考虑这个近似的HTML（行计数不完全匹配）：

For example, consider this approximate HTML (row count doesn't totally match up):

<ul>
    <li>Gray row</li>
    <li class="selected">Blue row - should have border-top-color only</li>
    <li class="selected">Blue row - should have NO border-top-color or border-bottom-color</li>
    <li class="selected">Blue row - should have border-bottom-color only</li>
    <li>Gray row</li>
    <li>Gray row</li>
    <li class="selected">Blue row - should have border-top-color and border-bottom-color</li>
</ul>

这是我想要的样子。这是在Chrome Devtools中伪造的。

This is what I want it to look like. This was faked in Chrome Devtools.

推荐答案

您可以使用选择器组合实现您想要的，如下面的代码段。虽然下面的代码段表明这是可能的，我仍然建议使用类，因为我相信你会有JS在Ctrl +单击添加类。

You can achieve what you want using a combination of selectors like in the below snippet. While the below snippet shows that it is possible, I would still recommend using classes because I am sure you would be having JS to add the classes during Ctrl + Click.

在这里是代码片段中的选择器执行的操作：

Here are what the selectors in the snippet do:

• .selected - 添加
> >

• border-top c $ c> .selected + .selected - 如果已选择则取消 border-top 元素具有紧邻其之前的选择
的另一个元素。

• .selected +：not（.selected） - 为没有选择类的每个元素添加 border-top 具有在其前面的选择类的元素。 c $ c> - 这是对于 last-child 是具有选择类的边缘情况。

• .selected - Adds a border-top to each element with the required selected class.
• .selected + .selected - Nullifies border-top if the selected element has another element with selected class immediately preceding it.
• .selected + :not(.selected) - Adds a border-top to every element which does not have the selected class but has an element with selected class preceding it. This acts like the border-bottom for the group.
• .selected:last-child - This is for the edge cases where the last-child is the one which has the selected class. In this case the previous selector will not apply and hence bottom border for the group will go missing.

.selected {
  background-color: #DBEAF7;
  border-top: 1px solid #9FC5F8;
}
.selected + .selected {
  border-top: none;
}
.selected +:not(.selected) {
  border-top: 1px solid #9FC5F8;
}
.selected:last-child {
  border-bottom: 1px solid #9FC5F8;
}
ul {
  list-style-type: none;
}
ul li {
  display: block;
  width: 100px;
  height: 20px;
}

<ul>
  <li>Processed</li>
  <li>Processed</li>
  <li>Processed</li>
  <li class="selected">Rejected</li>
  <li class="selected">Rejected</li>
  <li class="selected">Rejected</li>
  <li>Processed</li>
  <li class="selected">Rejected</li>
  <li class="selected">Rejected</li>
  <li>Processed</li>
  <li>Processed</li>
  <li>Processed</li>
  <li class="selected">Rejected</li>
  <li class="selected">Rejected</li>
</ul>

<ul>
  <li>Processed</li>
  <li>Processed</li>
  <li>Processed</li>
  <li class="selected">Rejected</li>
  <li class="selected">Rejected</li>
  <li class="selected">Rejected</li>
  <li>Processed</li>
  <li class="selected">Rejected</li>
  <li class="selected">Rejected</li>
  <li>Processed</li>
  <li>Processed</li>
  <li>Processed</li>
  <li class="selected">Rejected</li>
  <li>Processed</li>
</ul>

这篇关于使用CSS将顶部和底部边框添加到一组选定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！