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

Question

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?

Answer 1

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

Answer 2

Remove the space, it is not needed:

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

With the space, you're looking to style the first letter of any descendants of p:first-child, rather than p:first-child itself.

Note that :first-child is a pseudo-class, and :first-letter is a pseudo-element. Pseudo-elements have slightly different rules when it comes to combining selectors, which is something you'll have to keep in mind (namely, you can only have one pseudo-element per selector and it must come last, so something like p:first-letter:first-child would not be valid).

Answer 3

Remove the space between pseudo-classes and pseudo-element:

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

jsFiddle example