How to display different text in html depending on the class that its embedded in-CodePudding

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

This works in changing the background when the class 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 works in always displaying a variable

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

However this doesn’t work in displaying the variable only when the category is set:

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

Can you help?

CodePudding user response：

You can't nest rules in CSS (you can in SCSS). There is a first public working draft to allow nesting in CSS, so maybe in the future you will be able to.

So you would need to do something like:

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

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

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

See the CSS descendant combinator and the CSS child combinator.