So, this has been around for a few years now, but I only recently became aware of it. And I thought I’d spread the word here, because it’s really quite cool and opens up more options for us using custom CSS in Docebo.
There’s a lot you can read about this online, but I liked this little run-down: https://gomakethings.com/the-has-css-pseudo-class/
A couple of examples where I’ve already found a use-case for this in Docebo:
- It bugs me that when you self-enroll in a course that requires admin approval, on the course page it shows your status as “Enrolled” with a warning box below that. As far as I’m concerned, no. You are not enrolled yet. But how do I hide that status in this situation without hiding it all the time?
Answer:
.lrn-widget-content-enrollment-status:has(+.lrn-widget-content-enrollment-description) {
display: none;
}- I have an external page embedded as an iframe. I don’t want the title bar to show up for this particular page; it’s superfluous and unhelpful. Perhaps there’s another way to do this, but this is what worked for me:
doc-layout-title-bar:has(+ div #doc-page-123) {
display: none;
}So actually, both of these examples are more like “previous sibling” selectors rather than “parent” selectors. But the point stands.
Is anyone else using the :has() pseudo-class? And if so:
