Greenshift’s inline HTML style elements break or flip nth-child selectors

  • Resolved abitofmind

    (@abitofmind)


    1 year, 5 months ago

    Problem: The CSS selector :nth-child e.g. for creating sections with alternating background colors (for a mix of successive Native Group blocks or Greenshift Container blocks), gets broken by Greenshift’s inserted <style> elements:

    ?

    ?

    Fix / Workaround: Use div:nth-of-type() and be sure that all your group/container blocks uniformly use <div> as the HTML element:

    Note: If a future version of Greenshift allows one to set the HTML element type for its Container block to be more semantic HTML, then your selector would be e.g. section:nth-of-type.

    • This topic was modified 1 year, 5 months ago by abitofmind.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author wpsoul

    (@wpsoul)

    <style> are visible on in editor, not on frontend. Container block already has tag selector. Currently it’s not clear from your message how this affects nth-child because core group block has no style tags. And if you use custom code, you can use div:nth.. or others which you need

    Thread Starter abitofmind

    (@abitofmind)

    Clarification:

    A group block with the additional css classes .has-child-groups-butted and .has-child-groups-with-alternating-bgcolor-base-tertiary acts as the wrapper for a series of sections with alternating bg-colors, defined in a CSS file which I enqueue via functions.php.

    In that wrapper the first child is a Greenshift container, then native group blocks follow.

    As the Greenshift container also outputs <style scoped> element before its div.gspb_row element in the Frontend output, the alternating background color series based on a :nth-child() selector will have an unexpected result. The <style> element is within that children series, but it has no visible content. Hence you have suddenly two consecutive visible sections with the same bg-color.

    But the fix is simply to use the :nth-of-type() selector.

    I wanted to share this learning here, so that people browsing or googling for the same problem find a solution here.

    • This reply was modified 1 year, 5 months ago by abitofmind.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Greenshift’s inline HTML style elements break or flip nth-child selectors’ is closed to new replies.