0

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?

Sam Garforth
  • 25
  • 5
  • 1
    What are you using for a CSS processor, because your CSS that isn't working isn't valid. Also, in your HTML it doesn't mention category-rabbitmq anywhere. – imvain2 Oct 07 '22 at 17:11
  • `content:` is only supported on `::before` and `::after` pseudo-elements, btw. – Dai Oct 07 '22 at 17:25
  • `` is not a valid HTML5 element nor a valid custom-elements (custom-elements [**must** have a hyphenated name)](https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name). – Dai Oct 07 '22 at 17:26
  • @imvain2 I think the answer is that the CSS processor is WordPress. I've realised that I missed a closing '}' but adding it in didn't fix it. – Sam Garforth Oct 08 '22 at 09:47

1 Answers1

1

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.

Peter Ajtai
  • 56,972
  • 13
  • 121
  • 140
  • Thank you very much. I'm very pleased that this works. However I still haven't solved the overall issue of "How to display different text in html depending on the class that its embedded in". The following works with either .category line but not with both. ` Read more about
    `     – Sam Garforth Oct 08 '22 at 09:15
  • 1
    Never mind. I tried it again and it worked. I don't know why. I guess layout has an effect. – Sam Garforth Oct 08 '22 at 09:42