CODEWITHSUNDEEP
csscss-selectors
Georg
Georg

Reputation: 23

How to style every first letter in a paragraph that is not a link

I am currently styling every first letter of a paragraph that follows a heading 3 with the following code, to make them stand out:

.someClass h3+p:first-letter{
    font-size: 2em;
}

Now, I want to exclude all links ("a"-tags) from the selection. I looked into the .not() selector, but

.someClass h3+p:not(a):first-letter{
    font-size: 2em;
}

is not working.

Any suggestions would be appreciated! Thank you.

Upvotes: 2

Views: 81

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18669

Let's debug by breaking down your current selector in English: .someClass h3+p:not(a):first-letter

  • .someClass h3 - select the h3 element inside .someClass element
  • .someClass h3+p - select the p element immediately after h3 inside .someClass
  • .someClass h3+p:not(a) - select the p element that's not an anchor element--

We can stop right there - a <p> element will never also be an <a> because an element can't have multiple tags. Since you're actually trying to affect an <a> INSIDE the <p>, a :not() selector isn't applicable here.

Fortunately, there is another solution - a little bit of an out-of-the-box one: if you change your problematic <a> elements that start the <p> to become block-level elements (using display: inline-block to preserve the intended layout), they won't be affected by their parent's first-letter rule anymore.

Here's how that works:

.someClass h3+p:first-letter {
  font-size: 2em;
}

.someClass h3+p a:first-child {
  display: inline-block;
}
<div class="someClass">
  <h3>H3</h3>
  <p>Paragraph Text</p>

  <h3>H3</h3>
  <p><a href="#">Paragraph</a> Text</p>
</div>

Upvotes: 2

Related Questions