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

Daniel Campbell
Daniel Campbell
10,148 Points
Posted by Daniel Campbell
Daniel Campbell
10,148 Points

CSS pesudo-class behaving strangely

Hi everyone,

in the CSS on http://kiti.ca the pseudo class works (the color change applies) but text-indent is not working.

I added a class with the same property below and that works fine, but it needs to be copied in each instance in the HTML code <div class="indent">. (trying to apply DRY)

Any ideas why text-indent isn’t working using the pseudo-class selector (.text::first-line), but works fine with the (.indent) class applied?

.text::first-line { 
    text-indent: 2em;  /* doesn't apply */
     color: #000;     /*  but this applies */
}

.indent {
    text-indent: 2em; /* this works but is less sexy */
}

4 Answers

Pirvan Marian
Pirvan Marian
14,609 Points

There are some ways, if you know that a p is going to be always the first child of the parent element, you can yse the :first-child pseudo-class.

<div class="text">
    <p>This is first line</p>
    <p>This is just another line</p>
</div>

.text p:first-child {
  text-indent: 2em;
}

The CSS rule will select and style every p element that's the first child of its parent who has the class text.That's just one way.

Pirvan Marian
Pirvan Marian
14,609 Points
Pirvan Marian
Pirvan Marian
14,609 Points

It does not work because only these properites can be used with the ::first-line pseudo-element:

color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, lineheight, clear,

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

Hi Pirvan, Thank you, so is there an alternative way to indent the first line? How would you have done it?