Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Selectors Advanced Selectors Pseudo-Elements - ::first-line and ::first-letter

Posted by Aiden Mitchell
Aiden Mitchell
5,572 Points

First line not bold!

My first line is supposed to be bold, but it is not!

Here is a snapshot of my workspace: https://w.trhou.se/rq7uq81iar

4 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey there,

At first I thought it was because you weren't using the double colons (::), but apparently that no longer matters. I forked your workspace and ran your page in Chrome, Safari and Firefox... the first line was bolded with no changes to your styles.

Did you refresh your page when previewing? Because, everything seems to work as intended when run.

:dizzy:

Aiden Mitchell
Aiden Mitchell
5,572 Points

I have refreshed my page and it does not work.

kristofferschousboe
kristofferschousboe
8,955 Points
kristofferschousboe
kristofferschousboe
8,955 Points

I had the same problem on my Firefox browser.

I fixed it by adding the below lines to the top of my CSS document.

p {
  display: inline-block;
}

For some reason it would not work when the paragraphs display was set to block, even though the documentation state that it should. Hope this is helpful if anyone else should have the same problem.

Dominic Davies
Dominic Davies
5,284 Points
Dominic Davies
Dominic Davies
5,284 Points

I had this problem in my workspace on Firefox too

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

It's definitely bold when I preview your snapshot. It may be a case where you need to refresh or clear your cache. Google it.

I'd also recommend using (2) colons when specifying pseudo-elements (e.g. ::first-line); reserve (1) for when specifying pseudo-classes (e.g. :first-child).

Aiden Mitchell
Aiden Mitchell
5,572 Points

Clearing cache does not work. Same with 2 colons.

James Pask
James Pask
13,600 Points
James Pask
James Pask
13,600 Points

Hi aidenmitchell did you ever get this to work in Firefox? I've just got to the training today on Firefox 52.0.2 and I get exactly the same thing as you. I did try in Opera (v44.0) and it displays as it should. It's a real mystery as to why Firefox is ignoring the styling.