1

I have successfully put a large first letter on the first paragraph on blog posts. But if there are other first paragraphs in the post (examples: the first paragraph of a blockquote, the first paragraph in an embedded podcast player) they are also displaying the large first letter.

I have tried some examples from this post but I'm not sure if this article is covering my situation or not. I'm new to the idea of adjacent sibling selectors. I'll share the code I tried to implement by (assumedly) telling any other p:first-of-type::first-letter incidents after my first incident to not have the styling...

.single .post .entry-content p:first-of-type::first-letter {
  float: left;
  width: 0.75em;
  font-size: 600%;
  font-family: alice, serif;
  line-height: 78%;
}

.single .post .entry-content p:first-of-type::first-letter ~ p {
  float: none;
  width: 0;
  font-size: 100%;
  font-family: lora, serif;
  line-height: 0%;
}

The large letters remain in block quotes and the embedded podcast player. How would I explain that first letters of first paragraphs inside of divs which are nested inside the .entry-content area should not have the first letter styling?

David Borrink
  • 13
  • 4

1 Answers1

0

If your targeted paragraph is a direct child of .entry-content then you can use the direct children selector > :

.single .post .entry-content > p:first-of-type::first-letter {}

By using the direct children selector you don't select descendant elements that are nested deeper than direct children. And by adding :first-of-type or nth-of-type(n), you select only your paragraph within those childrens.

Pierre-Yves Legeay
  • 638
  • 5
  • 14
  • Here is a post where that's happening. The first paragraph of the post is fine, it's the embedded podcast player that is showing two large first letter situations. What I want is only the first letter of the post to be large, not the ones in the podcast player. https://sallieborrink.com/aqsl-004-you-are-not-enough-and-thats-the-whole-point/ – David Borrink Aug 03 '19 at 20:45
  • I tested the solution i gave you by adding this rule in the inspector : **.single .post .entry-content > p:first-of-type::first-letter {color: red;}** and only the first lettre of the first paragraph was red – Pierre-Yves Legeay Aug 03 '19 at 20:58
  • Thank you Pierre-Yves. Your solution does work! I had not understood the concept of "direct children selectors". That's the isolation that I needed. Thank you! – David Borrink Aug 05 '19 at 01:39
  • With pleasure !. Consider *accepting* my answer if it was what you were looking for ;) – Pierre-Yves Legeay Aug 05 '19 at 05:09