CODEWITHSUNDEEP
htmlcss
user10808358
user10808358

Reputation:

style rule with pseudo element and a pseudoclass in css

I am trying to display the first letter of the first paragraph within the article element with a font size of 2em and vertically aligned with the baseline of the surrounding text. This is my code so far:

article p ::first-letter:first-of-type {
  font-size: 2em;
  vertical-align: baseline;
}

It didn't have the desired results. Maybe someone could advise please how i may fix my code to achieve that goal?

Upvotes: 0

Views: 159

Answers (2)

Anis R.
Anis R.

Reputation: 6912

Just reverse the pseudo class and the pseudo element, and remove the space character (that serves as descendant combinator):

article p:first-of-type::first-letter

Upvotes: 0

Quentin
Quentin

Reputation: 943591

  • Match things in the order that they appear in
  • Don't add descendant combinators (spaces) when you aren't trying to match a descendant

Such:

article p:first-of-type::first-letter {
  font-size: 2em;
  vertical-align: baseline;
}
<article>
  <h1>Example</h1>
  <p>The quick brown fox</p>
  <p>The quick brown fox</p>
  <p>The quick brown fox</p>
</article>
<article>
  <h1>Example</h1>
  <p>The quick brown fox</p>
  <p>The quick brown fox</p>
  <p>The quick brown fox</p>
</article>

Upvotes: 1

Related Questions