Double class in .solution environment and modyfing the label of the .solution environment via css

Issue

I am building a book using quarto where I need to use theorems, lemmas, corollaries, ..., etc. According to the documentation in quarto, here, you can create proof, remark, and solution environments. I am going to use these environments because in the future I will need also to render the book in Latex and not only in html.

I have the following reproducible example in relation to a .qmd where the styles.css is empty:

---
title: "Untitled"
format: 
  html:
    css: styles.css
editor: visual
---

## My proof

::: proof
The proof.
:::

## My solution

::: solution
The solution.
:::

I inspect the code generated by html in a web browser and in relation to these environments I get the following:

Proof environment

<div class="proof">
<p><span class="proof-title">
<em>Proof</em>. 
</span>The proof.</p>
</div>

Solution environment

<div class="solution proof">
<p><span class="proof-title">
<em>Solution</em>. 
</span>The solution.</p>
</div>
</section>

Taking into account the above information and pointing out that I am a beginner using html and css I want to know the following items:

• Why quarto creates 2 classes for the solution environment? Is this problematic or a bug?
• How can I modify the label inside <em>Solution</em> that belongs to the classes solution and proof-title without affecting the proof class via the styles.css file?

Solution

To answer your first question, AFAIK, the reason for using the class proof for the "Solution" environment is to ensure consistent style (outlook) with the "Proof" environment, that is, both the Proof and the Solution environment share some CSS properties via the .proof class.

And you can target the "Solution" label using the CSS selector .solution. proof-title.

Answered By - shafee