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
John Groves
3,916 PointsCSS general sibling combinators
I'd expect using ul~li {} to impact list items. It doesn't. Why not? ul>li and ul>li do e.g. ul~li {color:red} leaver all list items black
John Groves
3,916 PointsOK - thanks. I've now got it! I think that looking at it straight after > got me thinking wrongly. Grateful for the explanation
Luke Pettway
16,593 PointsAny time, there are so many of those selectors now that it is common to pull your hair out trying to figure out why one isn't working.
2 Answers
sizwengubane
15,244 PointsDont use a ~ in your css selector use it like this
ul li {
color:red;
}
Try this code and it should work. Mark my answer as the best if this works
John Groves
3,916 PointsHi Thanks for the prompt response. I guess I should have phrased the question better. I know the code you provided will work OK. What I 'm stuck on is understanding quite what the general sibling combinator does and why you might want to use it.
Starky Paulino
Front End Web Development Techdegree Student 6,398 Points~
Luke Pettway
16,593 PointsLuke Pettway
16,593 PointsThe general sibling selected ( ~ ) selects elements that are side by side. List items are nested inside of their parent ordered or unordered list. Lakindu Jayathilaka is correct in stating that you can simply do ul li to change the styles of a list item.