0

I have several blocks here that I would like to design differently, one contains text and the other a picture. Unfortunately, the css classes are the same and I can't use the ID because it is always displayed with 1, 2, 3... completed. Is there a trick to style this with css. As already indicated, I can't use the :nth selector because the order is always different. Does anyone have any ideas, thanks!

Bavra

<div id="block-justtransition-theme-testblockhtml" class="contextual-region block--type-block-with-html">

    <div data-contextual-id="block:block=justtransition_theme_testblockhtml:langcode=fr|block_content:block_content=4:changed=1714046004&amp;langcode=fr" data-contextual-token="4vz7RkERDoPBGRz4dHwAsTvYn_cdn7VRwTGz0wUPd18" data-drupal-ajax-container=""></div>
    <div class="field field--label-hidden field--type-text_with_summary field-body">
        <div class="field__content">
            <h2>Test Block html</h2><p><br>Placerat quam eleifend nobis voluptas expedita vero tincidunt, at lobortis, maxime sit magni ab aut purus occaecati per saepe bibendum, odio. Purus illo incididunt, ex anim aliquet? Nam? Irure ac ut incididunt veritatis nostra quisquam, viverra habitasse porro diam ipsam egestas beatae! Aptent metus veniam sunt, tempor sapien, sed dolorum magnam debitis non hac cupidatat ea nonummy faucibus scelerisque modi massa sociosqu pellentesque soluta, integer? Luctus condimentum corporis, unde! Aptent nemo, consectetuer id faucibus assumenda praesentium eaque maiores, proin sed eaque itaque iusto similique habitasse, pede quisquam! Consequat, nihil quis ratione hac! Iste imperdiet, luctus auctor officia labore, quidem! Qui.<br>&nbsp;</p><p>&nbsp;</p>
        </div>

    </div>
</div>

<div id="block-justtransition-theme-headerimage" class="contextual-region block--type-block-with-html">
    <h2>Header Image</h2>
    <div data-contextual-id="block:block=justtransition_theme_headerimage_4:langcode=fr|block_content:block_content=5:changed=1707486078&amp;langcode=fr" data-contextual-token="jLHhf7x405wmyQvrQTBmFp-Bfto-WY8xLu_L-24l8Go" data-drupal-ajax-container=""></div>
    <div class="field field--label-hidden field--type-text_with_summary field-body">
        <div class="field__content">
            <img data-entity-uuid="520edd47-ea9a-4a58-ae45-26c1992e076c" data-entity-type="file" src="/sites/stage-toumali.adelphi.de/files/inline-images/shutterstock_1891163254_rudiernst_marokko-hafen-rabat_breit-_0.jpg">
        </div>
    </div>
</div>
3
  • #block-justtransition-theme-testblockhtml .field__content { ... } and #block-justtransition-theme-headerimage .field__content { ... } no?
    – leymannx
    Commented Apr 29 at 20:57
  • 1
    You can also ignore the hash with "starts with" rule stackoverflow.com/a/11496658/2199525
    – leymannx
    Commented Apr 29 at 20:59
  • 1
    Just to add an alternative if you for example have multiple blocks you'll want to style the same drupal.org/project/block_class allows you to add classes via the block admin screens Commented Apr 30 at 8:53

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.