CSS Design: The Ubiquitous Three Column Layout Support Product Page

This topic was archived

#navlist vs. #nav ul li

Asked 24 Sep 2003 06:06:22
1
has this question
24 Sep 2003 06:06:22 Eric Cohen posted:
Greetings,

I just went through the article referenced above. Very useful.

Some code, which is listed at the end of this note, confused me. I understand what '#nav ul' is. Rather then using #navlist though, couldn't you use #nav ul li'? Or is it the equivalent to #nav ul?

On a similar point, the layout.css sheet has an id for 'navlist li'. Again, that looks to me like it should be equivalent to #nav ul li.

I guess another way to ask the question is, what do you gain with the #navlist ID -- isn't there a way to do it with desendent selectors? Or, why was the id of #navlist given vs. using a descendent selector? And if a descendent selector wouldn't work, why not?

I hope that makes some sense. This one has me baffled. Sorry for the newbie question. All help would be most appreciated!

Eric

#nav {
padding: 10px;
width: 128px;
position: absolute;
left: 10px;
top: 130px;
}

/* begin navigation styles */

#nav ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;

}

#navlist {
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid #993333;
width: 128px;
}

#navlist li {
margin: 0;
padding: 0.25em;
border-top: 1px solid #993333;
}

Replies

Replied 25 Sep 2003 15:11:03
25 Sep 2003 15:11:03 molly holzschlag replied:
Hi Eric,

You raise an excellent question and it simply boils down to personal preferences. There's more than one way to skin the ol' CSS cat.

The advantage to descendant selectors is that you can style very specific elements within a wide range of scenarios. The disadvantage is the more specific the CSS becomes, the more detailed your CSS might ultimately be in complex site scenarios, leaving less room for easy-breezy modification.

It's really as simple as that. Using #nav ul li will achieve the same results as I did.

I've found that CSS is really challenging precisely because of how many ways one can go about doing something. It's a very powerful technology and as with markup, no matter how much I know today it's still a very small piece of the greater pie. Even the CSS "gurus" out there openly admit they are humbled by it regularly. I suppose that's what keeps it all so interesting <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

Molly

Reply to this topic