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 Foundations Advanced Selectors Pseudo-Elements: ::first-line and ::first-letter

J V
J V
3,414 Points
Posted by J V
J V
3,414 Points

How does this adjacent sibling combinator work with ::first-letter?

I am trying to apply the concept of adjacent sibling combinator in two scenarios.

Scenario One: I managed to get the combinator to work, but I do not understand how it works. From my understanding, all of the paragraphs that follow the class selector (.main-headerAbout) should have the following CSS properties applied to them, but that is not the case and I do not know why.

<body>
  <div id="wrapper">
  <section>

  <header class="main-headerAbout">
    <span class = "titleAbout"><h2>About</h2></span>
  </header>


  <p>I provide fast and reliable services for your mobile needs.</p>

  <p>We provide the following services:</p>

    <div id="servicelist">
      <ul>
          <li>Sell used/new Iphones and IPads</li>
          <li>Fix phones</li>
        </ul>
    </div>

  <p>Worried about the time and cost?</p>


  </section>

 </div>

</body>

Here is the CSS:

.main-headerAbout + p::first-letter
{
  float:left;
  margin:10px 5px 18%;
  padding: 0 5px;
  background: white;
  font-size: 75px;
  line-height: .5;
}

Scenario Two: I tried to get the following adjacent sibling combinator to work as I did above, but I am not having any luck. 

  <body>
  <div id="wrapper">
  <section>

  <header class="main-headerAbout">
    <span class = "titleAbout"><h2>About</h2></span>
  </header>

    <div class="information">
      <p>A mobile phone technician.</p>
      <p>I fix it, so you can continue to enjoy staying connected.</p>
       <p>I fix it, you play with it.</p> 
    </div>

  </section>

 </div>

</body>

Here is the CSS:

.information + p::first-letter
{
  color:blue;
}

2 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points 
.information + p::first-letter
{
  color:blue;
}

Your code selects the first letter of the first adjecent paragraph of anything with the class .information. Your paragraphs are not adjacent to your .information div (They would need to come directly after the closing tag of your .information div to be adjacent).

Your paragraphs are contained as child elements inside your .information class.

You need to use the :first-child selector rather then the adjacent sibling combinator.

.information p:first-child:first-letter {
  color: blue;
}

This selects the first letter of the first child of any parent with .information class.

J V
J V
3,414 Points
J V
J V
3,414 Points

Hi Ashley,

Thanks for answering my question. Your answer is helpful and clears things up for me. It's a bit confusing at first, but with practice it will make more sense.