title: Target CSS to specific eDirectory page
body: <p>I want to make the major event image on the left height larger, without affecting other pages.</p>
  
  <p><a href="https://islandeguide.com/event/" rel="nofollow noreferrer">https://islandeguide.com/event/</a></p>
  
  <p>I Noticed this page has this that makes it unique</p>
  
  <pre><code>h2 class="theme-title" data-trans="Featured Events"&gt;Featured Events/h2
  </code></pre>
  
  <p>So I thought I may be able to do something like</p>
  
  <pre><code>page.themetitle[Featured Events] .col-sm-5 &gt; .theme-box.theme-box-vertical &gt; .theme-box-content img{
  height: 350px;
  }
  </code></pre>
  
  <p>I made this part up <code>page.themetitle[Featured Events]</code> so I knew it would not work.</p>
  
  <p>Does anyone know if I can put something there that would work?</p>
  
  <p><strong>Note:</strong></p>
  
  <p>I can add CSS to custom CSS document, but that is all! I do not have access to change the HTML/PHP, also I can not add Javascript.</p>
  
  <p>This website was designed in a way that makes it very difficult to target elements without changing others on different pages, as they share Classes everywhere.</p>