Скачать или смотреть How to Add a Horizontal Separator in CSS for Grouped Items with Display: None

Learn how to create a horizontal separator between grouped items using pure CSS, making it compatible with visibility changes.
---
This video is based on the question https://stackoverflow.com/q/76479791/ asked by the user 'madprops' ( https://stackoverflow.com/u/661424/ ) and on the answer https://stackoverflow.com/a/76490721/ provided by the user 'myf' ( https://stackoverflow.com/u/540955/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Horizontal line after certain items no matter the visibilities

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating a Horizontal Separator for Grouped Items in CSS

Have you ever encountered a situation where you need to visually separate two groups of items, but some of them might be hidden? This often arises in web development when we manage lists that toggle visibility based on user interactions. Fortunately, there is a neat solution that utilizes CSS without relying on JavaScript hacks.

The Challenge

Suppose you have two types of items (let's say .a and .b) that are always grouped. Your goal is to introduce a horizontal line between these groups, even if some items are not displayed (display: none). This can be particularly cumbersome if you are trying to avoid styles that either touch borders or look messy.

Let's consider the scenarios:

All items are visible.

You show the line between the last .a and the first .b.

Some .b items are hidden.

The same horizontal line should appear, unaffected by the visibility of any .b.

Some .a are hidden.

The line should still exist even when the last .a is hidden.

In a conventional scenario, JavaScript might be employed to manage the layout. However, with a clever use of CSS, we can achieve this abstraction without increasing complexity.

The Solution

The CSS Approach

The solution can be accomplished using simple CSS selectors along with the :not() pseudo-class. The idea is to style the hidden elements while allowing others to take precedence. Here's how:

[[See Video to Reveal this Text or Code Snippet]]

Explanation

Selector Breakdown:

.a:not([hidden]) ~ .b:not([hidden]): This selector targets any .b elements that follow visible .a elements, applying a border-top.

.a:not([hidden]) ~ .b:not([hidden]) ~ .b: This selector removes the border-top from any subsequent .b elements after the first visible .b.

Example Code

Here’s an example of how you would implement this in practice:

[[See Video to Reveal this Text or Code Snippet]]

Enhancements and Alternatives

Alternatively, you can keep the separators visible even for hidden .b items. If you wanted the visual separation to remain regardless of conditions, a simpler approach would be:

[[See Video to Reveal this Text or Code Snippet]]

Additional Improvements with Flexbox

You can also integrate this concept into a more dynamic setup using CSS Flexbox for better item management while still maintaining the separator. The following illustrates an expandable solution where items can be filtered or reordered:

[[See Video to Reveal this Text or Code Snippet]]

Filtering Demo

This section shows how to set up a minimal functional demo using buttons to filter items:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With this guide, you can easily implement a horizontal separator for grouped items in CSS that works seamlessly with hidden elements. The strategies shared resort to clean and maintainable CSS solutions, empowering you to keep your code simple yet effective.

Now, say goodbye to JavaScript workarounds for something that is indeed possible with pure CSS!