Custom CSS
      Back to home
      1. Resources and Documentation
      2. Custom CSS

      Apply Custom CSS to a Single Custom Content Element

      How to avoid applying a style to all Custom Content

      To change the appearance of a single Custom Content block, you will need to use the "nth-child" selector.

      For example:

      #GF-Blocks > div:nth-child(12){
          transform:rotate(-40deg);
      }

      This query looks at the entire collection of Giving Form elements, then finds the 12th div element in that collection and applies the style.

      So, if you wanted to adjust a Custom Content block, and that Custom Content block is the 7th element on the form, your query would look like this:

      #GF-Blocks > div:nth-child(7){
          color:#000000;
      }

      Keep in mind that re-arranging form elements can affect the nth-child query.  For example, if your Custom Content was element 7, and you add an element at the top, your Custom Content block is now element 8.