CODEWITHSUNDEEP
htmlcss
Ole
Ole

Reputation: 46890

Turning of the first ::before pseudo selector?

I'm attempting to design a Breadcrumb component with the following markup;

    <nav aria-label="breadcrumb" 
        class="BreadcrumbContainer">
      <a  
        href="#"
        aria-current="page" 
        class="Breadcrumb onActive" aria-current="page">Home</a>
    </nav>

    <nav aria-label="Breadcrumb" class="BreadcrumbContainer">
      <a  
        href="#"
        class="Breadcrumb" aria-current="page">Home</a>
      <a  
        href="#"
        aria-current="page" 
        class="Breadcrumb onActive" aria-current="page">Users</a>
    </nav>

I'm separating the <a> elements using the ::pseudo selector like this:

.Breadcrumb::before {
  content: "/";
  padding: var(--Breadcrumb-padding);
}

However this will always paint the \ in front of the first anchor element inside the nav element. Is it possible to switch off the ::before selector for the first child of N children?

Upvotes: 0

Views: 29

Answers (1)

Ry-
Ry-

Reputation: 224855

Sure, by selecting breadcrumbs that aren’t first children of their parents:

.Breadcrumb:not(:first-child)::before {
  content: "/";
  padding: var(--Breadcrumb-padding);
}

(unnecessary backwards-compatible alternative:

* + .Breadcrumb::before {
  content: "/";
  padding: var(--Breadcrumb-padding);
}

Or by undoing it for first children:

.Breadcrumb::before {
  content: "/";
  padding: var(--Breadcrumb-padding);
}

.Breadcrumb:first-child {
  content: none;
}

Upvotes: 1

Related Questions