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 Going Further with Attribute Selectors and Pseudo-Classes :first-child and :last-child

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Posted by Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

my first and last child index.html file is not finding the style.css file

My index.html file is in the same directory as the the style.css file but the html file is not reflecting any of the styles I am adding to the css style sheet, yet they are both in the root directory

8 Answers

johannaho
johannaho
4,150 Points

Hi Miriam,

I tried this with the editor (Sublime on a mac in my case), with your code. And at first it didn't work. That was because in the html code it says that the css file is in the css folder: css/style.css.

But if the html and css file are both in the same folder, the code should be href="style.css" without the css/. And I put both of them in the same folder without sub-folders.

In the workspace it's different because there is a different sub-folder for both css files. You could create that css sub-folder on your own mac and the whole thing should work fine with the same code as in the workspace: href="css/style.css.

I hope this works! Johanna

johannaho
johannaho
4,150 Points
johannaho
johannaho
4,150 Points

Hi Miriam,

The same thing happened to me quite often. And it almost always turned out to be a typing error in the html, or I forgot to save the html-file, or I had the wrong file/old version of a file opened in the browser. And almost every time I couldn't find it at first and I thought I had done something very wrong or worse, lost a whole file.

It's bene four hours since you asked your question. I hope you found the culprit. And if not, maybe you could show the html to us en let others help you find it.

Good luck, Johanna

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

Hi Johanna,
I am pretty sure the problem is the location of the html file and the css file - they are in the same directory but somehow there is still a problem

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            color: #616161;
            padding: 40px 0;
        }
        ul {
            list-style: none;
            width: 50%;
            margin: auto;
        }
        li {
            border-bottom: 1px dotted #40918c;
            padding: 15px 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>
</body>
</html>

Here is the css

li:first-child {
    background: #52bab3;
    color: white;   
}

li:last-child {
    border:none;
}

Thank you Miriam

johannaho
johannaho
4,150 Points
johannaho
johannaho
4,150 Points

Hi Miriam,

I think your code should look like this:

   <link rel="stylesheet" 
   href="http://fonts.googleapis.com/css?family=Nunito:400,300">

  <link rel="stylesheet" type="text/css" href="style.css">

In your code you use both ' and ". I am not sure if this is allowed, but I am sure it's not recommended. You'd better choose one of them and stick to it in the whole file.

And I have split up the code for the font-family and the style sheet. I don't know if it's allowed to combine them. So, just to make sure, I've put them into two different lines of code.

And if the stylesheet style.css is in the same folder as the html file, then putting the name in there is enough. In that case you don't need to put css/ in front of it. But if you created a folder for your css, it might be wise to change that and to put all your files in one folder. That is easier to work with.

Hope it works. Johanna

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

Hi Johanna,

I am tearing my hair out - the two files are in the same folder yet they are still not "communicating" with each other. The code matches the video perfectly and the html is correct but somehow the style sheets are not styling the html. Any other suggestions?

Thank you Miriam

johannaho
johannaho
4,150 Points
johannaho
johannaho
4,150 Points

Hi Miriam,

I went to the lesson to check and try the whole exercise. (I didn't do that before my first answer to you). And it all worked fine. So I copied your css code into the workspace and put mine in /**/. And it still worked fine. And I checked your html code with the code in the workspace and they seem to be the same. So, it doesn't look as if anything is wrong with the code or the files.

But, like I said, things like this happened to me a lot. Not with workspaces in Treehouse, but with my own editor and the result in the browser. And it turned out quite often to be some mistake in the files I used.

For example I worked on one file, but changed the name or deleted the file and forgot to open this new file in the browser, so the browser was actually showing me the old file. But the old file looked a lot like the new one, so I didn't notice it was the old. Took a lot of time to figure it out. And all the time I was looking for something wrong with the code. Tearing my hair out, like you. I really know that feeling!!

So I think you should try to close the whole lot, start with a fresh workspace and try again. Maybe you are looking at the result of another workspace than the one you are working with now. Just like me with the old version of my file. ;-)

Good luck Johanna

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

Hi Johanna, I will try that starting all over again and hope I have better luck this time. Will keep you posted - thank you! Miriam

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

I tried again from scratch- I am using TextMate (on a mac) and still not showing any of the changes. I am just beside myself. I am clearly missing something and cannot figure out what or how to fix the problem Miriam