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 Let's Practice Selectors!

Andy Hughes
Andy Hughes
8,478 Points

Am I doing something wrong or is the CSS Selectors practice broken!

Hey folks,

So I've been brushing up on my rusty skills doing the CSS selectors practice. Right from the off, my index.html file, when previewed, does not look like Guils. For example, the nav links are in block form instead of inline.

So I paid no attention to this as I started the coding practice, I just got on with things. In watching Guil's solution I noticed that he had the exact same code as I did for the solution, yet our results were different. For example;

/* Change the color of all list items inside an unordered list */
ul li{
  color: lightcoral;
}

According to Guil, this changes the color of all the list items. However, it doesn't. It only changes the bullet points. Yet on his screen, it's changed the color of the text. Can someone explain what I'm missing please?

*** EDIT *** I've just rewatched the video solution and noticed that Guils nav links didn't change color. Even though the question asks you to change the list item's color, his links don't change. I get why this happens, but I don't get why he's asking us to change a color when it will have no affect. The list items aren't the actual text so of course there is nothing to change. If he'd said change the "link color", that would have been different. Very confusing and feels somewhat unnecessarily so.

Also, when I tried to do the text input border part, I couldn't get this to work for love nor money. Even though I checked and rechecked my code, it still wouldn't work in the preview. Here's my code;

/* Give the text field a blue border upon focus.
   Check teacher's notes for resources on this part of the challenge. */
input[type="text"]:focus {
  border: 2px solid red;
}

I've checked it on W3C School and I know the code is correct, but it doesn't work on the index.html file in the project.

At this point, I'm not sure if the practice is me coding, or Guil trying to see if he can drive me insane lol.

Looking for some help please!

Just so you have it, my entire selectors.css code is below.

/* ====================================================== 
   Practice CSS Selectors 
========================================================= */

/* Change the color of all list items inside an unordered list */
ul li{
  color: lightcoral;
}


/* Remove the text decoration from navigation links, and change their color when hovered */
nav a {
  text-decoration:none;
}

nav a:hover {
  color:red;
}


/* Create visited and hover styles for all links inside 'main' */
main a:hover {
  color:red;
  text-decoration:none;
}

main a:visited {
  color:purple;
}

/* 
 Change the background color of the submit button when active.
 Check teacher's notes for resources on this part of the challenge. */
input[type="submit"]:active {
  background-color:#3783af;
}


/* Give the text field a blue border upon focus.
   Check teacher's notes for resources on this part of the challenge. */
input[type="text"]:focus {
  border: 2px solid red;
}


/* Give the 'span' tag in the footer a meaningful class name and reduce its font size */
.copyright {
  font-size:10px;
}


/* Give the 'img' tag in the header an ID and set its width to 190px */
#logo {
  width:190px;
}


/* Target all heading tags on the page and set their font family to 'Bree Serif', serif */
h1, h2, h3{
  font-family:'Bree Serif', serif;
}

1 Answer

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hey Andy Hughes 👋

I've just had a look at the workspace and something indeed seems to be broken on this practice! Sorry for the confusion and thanks a lot for bringing this to our attention! Your code looks great to me and is supposed to be working as shown in the video without any issues 💯

Currently the workspace as it is only loads the selectors.css file while the provided base styles is not being loaded correctly.. You can fix this by adjusting the href attribute for the link tag on line 8 to be https:// instead of the http:// it currently is. This should apply all the provided styling as shown in the video! 😃

As for your question on why the navigation list items aren't changing color that is because they have a nested a tag. In the provided styles a elements get another color applied to them which in turn overwrites that lightcoral color on the list item elements 🙂

Thanks again, I've awarded you the Exterminator badge for bringing this bug to our attention 😃 I'll adjust the workspace shortly which should apply the fix for anyone starting the challenge from that point on.

Hope this clears things up! Happy Coding!

Rohald