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
Unsubscribed User
4,479 PointsWhy is the styling for a link put on the parent 'li' instead of the 'a' element?
Why is the styling for a link put on the parent 'li' instead of the 'a' element?
After watching the 'Add Iconography' video I would guess it might save on the amount of code needed to style the links but generally my question is about why the parent is targeted rather than the element in this case.
4 Answers
Unsubscribed User
4,479 PointsThanks Lori.
I understand if this is the more elegant approach but just so that I am clear - as an alternative, could the link be given frame-like properties by applying block or inline-block display values, then styled in a similar way to the li?
Lori Harvey
3,123 PointsI will explain it as I understand it. Perhaps someone else reading could give more info but I think of the "a" element as a portal, the actual link to where you are linking to once it is clicked upon. If you have more than one and want to show it in a group whether it is inline-block or block, I believe it would need to be as a list, either ordered or unordered. The list items don't need to have any sort of box or padding so the word or words that stand for your link can appear to be just hanging out on the page on their own with no other styling than what you choose to do to the font itself. If you just wanted anchor items in a sentence such as what I've copied below from the Treehouse course "CSS Basics" then they can just be listed as you want them to appear and would not need to be in any sort of list element.
"<p> As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>. </p>"
Lori Harvey
3,123 PointsAlso, from the same course here on Treehouse - this is an example of an unordered list of links that results in links that are not styled in any way except for the font elsewhere in the css.
<ul> <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li> <li><a href="#resorts">South Lake Tahoe Resorts</a></li> <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li> </ul>
Here are our top three resorts:
Lake Tahoe Resort Hotel
South Lake Tahoe Resorts
Tahoe Ski Resort Lodging
Unsubscribed User
4,479 PointsThanks Lori.
Just a thought - one advantage of styling 'a' links with block properties would be that the link's target area would be expanded by the dimensions specified for the link block.
But as always, I guess it depends on what you're working with for any given project.
Lori Harvey
3,123 PointsLori Harvey
3,123 PointsThe li is the container for the a element, it's what holds it, so that is what you're styling instead of the link itself. The link can be styled on its own such as no text decoration and that sort of thing, but think of the li as a frame that is decorating the actual a element.