styling the content in the text component by adding id_div parameter

[amrutadotorg]

Hi, based on my limited knowledge, there is currently no way to style the text component based on the provided parameter ID. What would you think of adding an id_div parameter? That way, we could use it like this:

css:

#headline2 strong {
    background-color: #4fc3f7;
    font-weight: bold;
}

sql:

SELECT 
    'text' AS component,
    'headline2' AS id_div;

text.handlebars:

{{{~html~}}}
{{~#if title~}}
    <h1 id="{{id}}" class="mt-3 {{#if center}}text-center{{/if}}">{{title}}</h1>
{{~else~}}
    {{#if id}}
        <a id="{{id}}"></a>
    {{/if}}
{{~/if~}}
{{~#if contents_md~}}
    <div class="remove-bottom-margin">{{{markdown contents_md}}}</div>
{{~/if~}}
{{~#if id_div~}}
    <div id="{{id_div}}">
{{~/if~}}
<p class="{{#if center}}mx-auto{{/if}}">
    {{contents}}
    {{~#each_row~}}
        {{~#if break~}}</p><p>{{~/if~}}
        {{~#if link~}}
        <a href="{{link}}">{{#delay}}</a>{{/delay}}
        {{~/if~}}
        {{~#if code~}}
        <code>{{#delay}}</code>{{/delay}}
        {{~/if~}}
        <span class="
            {{~#if color}}text-{{color}} {{/if~}}
            {{~#if bold}}fw-bold {{/if~}}
            {{~#if italics}}fst-italic {{/if~}}
            {{~#if underline}}text-decoration-underline {{/if~}}
            {{~#if size}}fs-{{minus 7 size}} {{/if~}}
        ">{{contents}}</span>
        {{~flush_delayed~}}
        {{~#if contents_md~}}
            {{{markdown contents_md}}}
        {{~/if~}}
    {{~/each_row~}}
</p>
{{~#if id_div~}}
    </div>
{{~/if~}}

[lovasoa]

Hi ! You can use the next-sibling combinator in css. Example: https://jsfiddle.net/d0zt52xb/

#my-paragraph + div strong {
  background-color: yellow;
}

[lovasoa]

By the way, are you sure you want to use a simple text element to represent your search results ?

Maybe it would be better to display them using the list component, and use description_md to highlight the relevant excerpts from your articles in your search results ?

[amrutadotorg]

Thank you. The list component was very useful.