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
Rustam Hudaygulyyev
1,148 Pointsn:th-child pseudo class is not listening to me :-((
Hello guys, I cannot implement n:th-child function towards images no matter what I do. It just keeps ignoring me :-). I tried to apply it to my gallery in my follow-along-with-Nick personal website but it didn't work. So I came up with completely new html page with CSS included, to check whether it's working. it still does not work.
Here is my new page: And I am expecting for the second image to resize to 800px and clear the floating. It;s not working. What's wrong?
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to overcome racing thoughts</title> <style> div.maintext { max-width: 70%; color: black; margin: -2.5% 0; padding: 2.5%; text-align: justify; }
img {
max-width: 100%;
}
p {
text-indent: 10px;
}
ul {
list-style: none;
max-width: 200px;
float: left;
}
ul:nth-child(2n) {
max-width: 800px;
clear: left;
}
div.maintext h1 {
text-align: center;
}
</style> </head> <body> <div class="container"> <ul class="pictures"> <li><img src="img/r-thoughts.jpg" alt="racing thoughts"></li> <li><img src="img/r-thoughts-2.jpg" alt="racing thoughts-2"></li> <li><img src="img/r-thoughts-3.jpg" alt="racing thoughts-3"></li> <li><img src="img/r-thoughts-4.jpg" alt="racing thoughts-4"></li> </ul> <div class="maintext"><h1>What Causes These Racing Thoughts?</h1> <p>Racing thoughts are a strange problem. It's not just the content of the thought. It's how it feels as though your thoughts are firing at such a fast pace that you cannot even remember what the last thought was, and by the time you have a new thought another one immediately takes its place.</p>
<p>Racing thoughts may affect anyone with anxiety, but it's most common for those that have anxiety attacks. Take my free 7 minute anxiety test to learn more about your attacks and how to stop them. Racing thoughts may also affect those with generalized anxiety disorder, and may affect nearly anyone with a disorder when they experience severe anxiety.</p>
<p>It's also very common at sleep. For some reason, many people find that their thoughts seem to be more rapid when they're trying to get to bed, and unfortunately when they occur during bedtime it can be very hard to fall asleep.</p>
<p>The causes of racing thoughts are likely related to the way your neurotransmitters interact during anxiety, along with the surge of adrenaline you get when you have anxiety (which may make your brain far more active). Adrenaline, especially, causes your mind to be over-active while simultaneously making it harder to focus. Other causes may include:</p>
</div>
</div>
</body> </html>
2 Answers
Rustam Hudaygulyyev
1,148 Points<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to overcome racing thoughts</title> <style> div.maintext { max-width: 70%; color: black; margin: -2.5% 0; padding: 2.5%; text-align: justify; }
img {
max-width: 100%;
}
p {
text-indent: 10px;
}
ul {
list-style: none;
max-width: 200px;
float: left;
}
ul:nth-child(2n) {
max-width: 800px;
clear: left;
}
div.maintext h1 {
text-align: center;
}
</style> </head> <body> <div class="container"> <ul class="pictures"> <li><img src="img/r-thoughts.jpg" alt="racing thoughts"></li> <li><img src="img/r-thoughts-2.jpg" alt="racing thoughts-2"></li> <li><img src="img/r-thoughts-3.jpg" alt="racing thoughts-3"></li> <li><img src="img/r-thoughts-4.jpg" alt="racing thoughts-4"></li> </ul> <div class="maintext"><h1>What Causes These Racing Thoughts?</h1> <p>Racing thoughts are a strange problem. It's not just the content of the thought. It's how it feels as though your thoughts are firing at such a fast pace that you cannot even remember what the last thought was, and by the time you have a new thought another one immediately takes its place.</p>
<p>Racing thoughts may affect anyone with anxiety, but it's most common for those that have anxiety attacks. Take my free 7 minute anxiety test to learn more about your attacks and how to stop them. Racing thoughts may also affect those with generalized anxiety disorder, and may affect nearly anyone with a disorder when they experience severe anxiety.</p>
<p>It's also very common at sleep. For some reason, many people find that their thoughts seem to be more rapid when they're trying to get to bed, and unfortunately when they occur during bedtime it can be very hard to fall asleep.</p>
<p>The causes of racing thoughts are likely related to the way your neurotransmitters interact during anxiety, along with the surge of adrenaline you get when you have anxiety (which may make your brain far more active). Adrenaline, especially, causes your mind to be over-active while simultaneously making it harder to focus. Other causes may include:</p>
</div>
</div>
</body> </html>
Katherine Duncan-Welke
iOS Development with Swift Techdegree Graduate 33,030 PointsYou should be using
li:nth-child(2) {
max-width: 800px;
clear: left;
}
Instead to target that item - if you use ul you are targeting the ul element, rather than the li which contains the image you want to alter. Also, be sure to apply the float to the li elements instead of the ul, because the lis (which are nested inside the ul container) are the parts you want to be floating. :)
Rustam Hudaygulyyev
1,148 PointsEither you are a magician or I am retarded....:-) it is working finally, Thanks a lot!
P.S. floating worked, but the image did not resize for some reason.