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-Classes: :nth-of-type and :only-of-type

Steve Isaacs
Steve Isaacs
2,112 Points
Posted by Steve Isaacs
Steve Isaacs
2,112 Points

My only-of-type code is the same as in the video, but doesn't work.

This code from the video lesson was supposed to make the p text blue. It doesn't seem to work, text is still black.

css

p:only-of-type {
    color: blue;
}
nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

It would be helpful if you post your complete HTML document and complete CSS file.

Thanks

6 Answers

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

only-of-type pseudo class only selects element if it is a only a child. 

<selecting_element>:only-of-type{


}

selecting element in your CSS is p. So it looks for p element that is only a child to any parent. But none exists in your HTML document.

Because, In your HTML, there are two <p> 

<body>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
<!-- FIRST P ELEMENT -->    
<p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodnth-of-type
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate.
    </p>
   <!-- SECOND P ELEMENT --> 
 <p>
        Praesent vestibulum purus justo, vel viverra nulla porttitor ac. Curabitur laoreet 
        luctus erat, eu porta dolor lacinia ac. Nullam fermentum tellus nec neque gravida adipiscing at quis dui.
    </p>
</body>

If you delete one <p> and try only-of-child pseudo class It will color <p> element.

I hope I answered your question.

Joseph Taralson
Joseph Taralson
1,737 Points
Joseph Taralson
Joseph Taralson
1,737 Points

Actually, Steve, Guil left a second paragraph in his index.html in the "Start" folder. In the video, he doesn't have that second paragraph. So when he sets up the only-of-child CSS, it works for him. I had to do the same thing - go to HTML and delete a second paragraph.

cp88
cp88
5,039 Points

Same for me, it didn't work as my index.html file from the Downloads folder doesn't match the one in the video. I don't recall Guil removing the second paragraph whilst I was watching it!

EDIT: just carried on watching the video and Guil adds IN the second paragraph, so it must be that the file in the "Start" folder is incorrect.

Kevin Cartwright
Kevin Cartwright
2,563 Points
Kevin Cartwright
Kevin Cartwright
2,563 Points

In your html, is the p element the only one in its parent? If there is another paragraph element in the parent element, then the text wont change because it is no longer the only one of its type..That would be my first guess as to why its not changing colors. Hope that helps!

Steve Isaacs
Steve Isaacs
2,112 Points
Steve Isaacs
Steve Isaacs
2,112 Points

Here's the html:

<!DOCTYPE html>
<html>
<head>
  <title>Structural Pseudo-classes</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodnth-of-type
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate.
    </p>
    <p>
        Praesent vestibulum purus justo, vel viverra nulla porttitor ac. Curabitur laoreet 
        luctus erat, eu porta dolor lacinia ac. Nullam fermentum tellus nec neque gravida adipiscing at quis dui.
    </p>
</body>
</html>

and the css

body {
    color: #222;
    font: normal 1.2em/1.5 Sans-Serif;
    margin: 40px auto 0;
    width: 78%;
}
div {
    background-color: #919090;
    color: white;
    float: left;
    width: 165px;
    height: 165px;
    margin: 50px 40px 40px 0;
    padding: 20px;
}
p {
    clear: both;
}

/* Structural Pseudo-classes. Keep up the good work! :) */

/* div:nth-of-type(odd) {
    background-color: steelblue;
} */

p:only-of-type {
    color: blue;
}
Steve Isaacs
Steve Isaacs
2,112 Points
Steve Isaacs
Steve Isaacs
2,112 Points

When I delete one of the p blocks in the html - it works, turns it blue - becomes an "only of type," But in Guil's example he has the html as posted above, and it works - changing both blocks of p text blue.

Steve Isaacs
Steve Isaacs
2,112 Points
Steve Isaacs
Steve Isaacs
2,112 Points

Crap, this is all my fault. I see now that Guil deleted one of the p blocks in the video. This is what you get for pushing ahead in the midnight hours ;)

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

We all make mistakes! It is learning path. Mistakes are apart.

Code! Code!

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Actually, Steve, you didn't make a mistake. Guil deletes a paragraph element that he had created during the video. The other paragraph element exists in the html file we all downloaded, but does not exist in the video. This "Deep Dive" is very informational, but this is the third mistake I've found from Guil's files thus far. As Karthikeyan mentioned, we all make mistakes, including the instructor.