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
Lucas Santos
19,315 PointsLittle help with this css selector question
Create a new rule using the selector that targets an element only if its ID matches the hash in a URL. Set the background color to tomato.
What I did:
div:nth-of-type([id="#"]) {
background-color: tomato;
}
The HTML they provided:
<!DOCTYPE html>
<html>
<head>
<title>More Pseudo-classes</title>
<link rel="stylesheet" type="text/css" href="page.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li><a href="#s1">Section 1</a></li>
<li><a href="#s2">Section 2</a></li>
</ul>
<div id="s1">
<h2>Section 1</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
</div>
<div id="s2">
<h2>Section 2</h2>
Integer laoreet urna ut est cursus nec tristique elit vestibulum. In hac
habitasse platea dictumst. Quisque pharetra odio nec urna lobortis sed
ultrices dolor posuere. Sed nec nisl id augue congue euismod.
</div>
</body>
</html>
4 Answers
Unsubscribed User
4,170 PointsHi Lucas Santos,
This question is a bit tricky. Have a look at this jsFIddle</a> example: http://jsfiddle.net/ovidiuvoicu/zgG5L/
Hope it helps.
Albert Evangelista
27,689 Pointstry this Lucas...
div:not( :empty ) { background-color: tomato; }
Lucas Santos
19,315 PointsThis worked but I don't see how this would make sense. That targets any div that it not empty, not targets a div only if its ID matches the hash in a URL.
Albert Evangelista
27,689 Pointsit worked because the "<div>" that are being targetted are'nt empty. Both of them has "<h2></h2>" between them thats why they got selected. The ":target" style of selecting will work too because the hashes matches the IDs and both these styles of selecting are within the range of what is being discussed in the video. I haven't tried your "nth-of-type" code up there but its clearly not what is being taught in that particular lesson.
Lucas Santos
19,315 PointsI see ok got it thanks, btw yeah nth-of-type is covered in the video for selecting a certain type of element.
James Finn
7,055 PointsNew answer below:
James Finn
7,055 PointsMy bad, mis-read your question. The syntax to achieve your desired result:
:target{background-color:tomato;}
Simple as that! :) Read more on :target here
Lucas Santos
19,315 Pointsthis works as well thanks!
James Finn
7,055 PointsYour welcome! Thank you!
James Finn
7,055 PointsActually, this is the "best answer" because this is the syntax being used in the lesson. :) Ovidiu Voicu got here first, he should get it.
Lucas Santos
19,315 Pointsyeah man it's kind of difficult picking a best answer when everyone here provided solutions so I just try to go based on who provided the solution first I guess.
Lucas Santos
19,315 PointsLucas Santos
19,315 PointsI can see how this can also work with :target as well