|
From: Stavros M. <mac...@gm...> - 2025-07-11 15:30:39
|
Perplexity says:
how do i write a CSS selector that only applies to class B within class A?
To apply CSS only to elements with class B that are within an element with
class A, you should use a descendant selector or, if you want to target
elements that have both classes, a compound class selector.
1. Descendant Selector
This targets any element with class B that is *inside* an element with
class A, at any nesting level:
css
.A .B { /* CSS rules here */}
-
This matches any element with class B that is a descendant (child,
grandchild, etc.) of an element with class A
<https://www.quackit.com/css/tutorial/css_class.cfm>
<https://www.w3schools.com/cssref/sel_class.php>
<https://discuss.codecademy.com/t/faq-learn-css-selectors-visual-rules-css-setup-selectors-nested-elements/267380>
.
2. Direct Child Selector
If you want to target only direct children:
css
.A > .B { /* CSS rules here */}
-
This matches .B elements that are *immediate* children of .A
<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators>
.
3. Compound Class Selector
If you want to style elements that have *both* classes A and B (e.g., <div
class="A B"></div>):
css
.A.B { /* CSS rules here */}
-
No space between .A and .B. This selects elements that have *both* classes
at the same time, regardless of order
<https://stackoverflow.com/questions/807415/css-selector-for-an-element-having-class-a-and-class-b/807450>
<https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors>
<https://www.sitepoint.com/class-selector-css-selector/>
<https://www.reddit.com/r/css/comments/1dnkd7s/correct_usage_of_classes_and_other_selectors/>
.
Summary Table:
Selector Matches
.A .B Any .B inside .A (any depth)
.A > .B .B that is a direct child of .A
.A.B Element with both .A and .B classes
Choose the selector based on your specific HTML structure and styling needs.
On Fri, Jul 11, 2025 at 10:32 AM Raymond Toy <toy...@gm...> wrote:
> On 7/10/25 8:07 AM, Raymond Toy wrote:
>
> On 7/8/25 12:32 PM, Stavros Macrakis wrote:
>
> That just looks like a bug. Surely the syntactic highlighter is only
> supposed to operate on text tagged as code.
> It can't possibly work on free text, since a lot of Maxima keywords and
> function names are common English words.
>
> The current implementation just looks for an html class of
> .example-preformatted because currently all @example blocks are emitted
> with that class.
>
> Newer versions of texinfo support doing @example style where style can by
> things like lisp, c, or whatever, including maxima. I forget what is
> produced in the html but we could modify the highlighter to only look for
> the appropriate class.
>
> FWIW, I played around with texinfo 7.2 and modified some examples for
> jacobi_sn to use @example maxima. The generated html looks like:
>
>
> <div class="example user-maxima">
> <div class="group">
> <pre class="example-preformatted">(%i1) jacobi_sn (u, m);
> (%o1) jacobi_sn(u, m)
> </pre>
> </div>
>
> I can't figure out how to specify a CSS selector so that we only highlight
> the "example-preformatted" class inside the "example user-maxima" class.
> I'm really terrible with html and css.
> ​
>
|