Two level breadcrumbs with CSS :only-child

There was a situation where we had some breadcrumbs being produced by a CMS. The problem was that the breadcrumb appeared on the top-level page as well as it’s children pages. On the top level page it came across very redundant, and this single level breadcrumb would appear right above the page title. However, we wanted the breadcrumb trail to still appear on the second level pages.

Ideally, this kind of situation would be dealt with at the template level, and the markup would simply be absent. In this case, we couldn’t change the template, we could only change the CSS.

The solution was the CSS :only-child pseudo selector.

Read More1 Comment