CSS Pseudo-classes Combine :first-child and :first-letter

Issue

I've been having a look at CSS Pseudo-Classes and have been playing around with a few of the available classes to see what can and can't be done.

My question is:

I want to use the :first-child selector to target the first instance of a paragraph appearing

eg:

p:first-child  {
  color:#333;
  font-weight:800;
}

What I also want to do is to select the first letter of the first paragraph and increase the font size of the first letter

To select the first letter of each paragraph I would use the following css:

p:first-letter {
font-size:1.6em;
}

However with the above code I target the first letter of every p block of text and I only want to target the first letter of the 1st paragraph

I tried the following code to target my required elements but it does not work

p:first-child :first-letter {
font-size:1.6em;
}

Anyone know how I can achieve my requirements stated above?

Solution

Do:

p:first-child:first-letter {
    font-size:1.6em;
}

You dont need the space between the two operators.

However this will select all p elements which are the first children. If you only want to do this across every p element on your page regardless of nesting, you will need to add more specificity

Answered By - SW4