CSS class on main content container

[techxplorer]

Hi,

On my site I've added some custom CSS to add a drop cap to my first paragraph. In order to do so I needed to add a class to the main content container. So that this:

<div>
   {{ .Content | emojify }}
</div>

Becomes this:

<div class="post-content">
  {{ .Content | emojify }}
</div>

The CSS I'm currently using is:

.post-content p:first-child:first-letter {
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 2.5rem;
  float: left;
  margin-right: 0.25rem;
}

Overriding one whole template to add a single class seems a bit excessive.

I have two questions:

1. Is there a better way to achieve this?
2. Would a pull request including a class name on the main content container be welcome?

[techxplorer]

Hi,

I think I've answered my own question. By using a very specific selector I can select the same element without the need to override the template. Specifically:

#main-content > article > section > div p:first-child:first-letter {
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 2.5rem;
  float: left;
  margin-right: 0.25rem;
}