Check whether there is only one child item using CSS

.breadcrumb.scss

    .breadcrumb--item:only-child {
      svg {
        display: none;
      }
    }

Issue:

In breadcrumbs, for example, icons are often assigned for illustrating the following entries. However, under certain circumstances there may only be the initial entry, so the icon points to a blank space.

Breadcrumb <ol> with only one child <li> and icon <svg>

Solution:

Make use of the `:only-child` pseudo-class to determine whether there is only one item in the breadcrumb. See more in the Mozilla Dev Documentation

Also check "caniuse" for compatibility information: https://caniuse.com/?search=only-child

Zurück zur DevBit-Übersicht