CSS Class for Latest and Categories

I’ve searched and tried everything I can but can’t come up with a solution for this. I need to add some content to certain categories and the /latest and /categories pages.

Here is what I have done for the categories:

body.category-image-critiques-avian-critiques .featured-tiles::before,
body.category-image-critiques-flora-critiques .featured-tiles::before,
body.category-image-critiques-human-fauna-critiques .featured-tiles::before,
body.category-image-critiques-landscape-critiques .featured-tiles::before,
body.category-image-critiques-macro-critiques .featured-tiles::before,
body.category-image-critiques-night-critiques .featured-tiles::before,
body.category-image-critiques-weekly-challenge .featured-tiles::before,
body.category-image-critiques-wildlife-critiques .featured-tiles::before,
body.category-image-critiques-abstract-critiques .featured-tiles::before,
body.category-image-critiques .featured-tiles::before {
  content: "Recent Editors' Picks";
  font-size: 1.5em;
}

But I also need this on latest and categories. You can sort of achieve this using .navigation-topics but this doesn’t apply to categories, and I also do not want this content on /top, etc.

There’s .categories-and-latest but it doesn’t seem to work with:

.categories-and-latest .featured-tiles::before {
  content: "Recent Editors Picks";
  font-size: 1.5em;
}

Any ideas? Seems like I’m missing something silly, or maybe it’s just not possible.

Hello, Yeah, this won’t work like this.


Try something like this :slightly_smiling_face:

body.categories-list.navigation-categories .featured-tiles::before,
body.navigation-topics .featured-tiles::before {
  content: "Recent Editors Picks";
  font-size: 1.5em;
}
1 Like

Thanks Don, that works for Categories, but what about Latest?

Oh yeah sorry I edited the post above. :slightly_smiling_face:

1 Like

Thank you, but the problem with body.navigation-topics is that it shows on /top, /unread, etc.

1 Like

Do you want to add this text to everywhere where appears Featured Tiles?

If yes, I think maybe the easiest if you just target something like this.

.featured-tiles > div:not(:empty)::before {
  content: "Recent Editors Picks";
  font-size: 1.5em;
}
3 Likes

Yes! You are brilliant Don, thank you so much!

1 Like