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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Posted by katharine horlick
katharine horlick
2,146 Points

why do we need to specify that we want the li.phone instead of just the .phone?

why do we need to specify that we want the li.phone instead of just the .phone?

3 Answers

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

:point_right: If only li elements have the class phone, it makes no practical difference.

But if there are other elements that share the same class, or there might be in future edits, using the more specific selector will insure that the properties are only applied to the correct elements.

It can also enhance readability for someone unfamiliar with the HTML to know while looking at the CSS that only one type of element is being selected by the rule.

rakan omar
rakan omar
15,066 Points
rakan omar
rakan omar
15,066 Points

if "phone" is a class, then multiple elements can have the same class. if you were to write just ".phone", then you would select all elements with the class "phone", specifying li .phone makes it so that you only target list items with the class phone.

note: you also have to consider that elements added in the future may also contain the class phone, you have to consider more than just elements that exist at the moment.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

The difference between li.phone and li .phone or just .phone

<li class="phone"><span class="phone">some text here</span></li>
<div class="phone"><li ><span class="phone">some text here</span></li>

li.phone will only access the li with the class phone

li .phone will access any li item with class phone as well as any child of an li with class phone in this case the li tag and two span classes.

.phone will access any item that has class phone so here it would be the li tag, two span tags and the div tag.

Being specific matters especially if the code will grow or change.