How to render different text in HTML using embedded classes

Question

I want to display different text based on the category/category the code is embedded in, i.e. when the category is .category-rabbitmq.

This changes the background when the category is .category-rabbitmq.

<style>
.category-rabbitmq
{
    background-image: url('https://www.nastel.com/wp-content/uploads/2022/04/nastel_navigator_xpress.png') !important;
    background-size: cover;
}
</style>
<themainbody>Read more about</themainbody><br>

This always displays a variable.

<style>
themainbody::after {
  content: "RabbitMQ";
}
</style>
<themainbody>Read more about</themainbody><br>

However, this does not work when only displaying the variable when setting the category:

<style>
.category-rabbitmq
{
  themainbody::after {
  content: "RabbitMQ";
}
</style>
<themainbody>Read more about</themainbody><br>

Can you help?

Answer 1

Cannot nest rules in CSS (can in SCSS). There is a first public working draft that allows nesting in CSS, so maybe in the future you will be able to.

So you need to do something like this:

<style>
.category-rabbitmq themainbody::after {
  content: " RabbitMQ";
}
</style>

I'm not sure how many levels the .category-rabbitmq element has relative to themainbody. If you know that themainbody is a direct child of .category-rabbitmq, then you can be more specific and use the child combinator and optimize: >

<style>
.category-rabbitmq > themainbody::after {
  content: " RabbitMQ";
}
</style>

See CSS Descendant Combinators and CSS Child Combinators.