attila2452 Posted November 15, 2010 Share Posted November 15, 2010 So my list items are separated by border bottom. i don't want the last child (list item) to have the border. so ive tried this.. but it doesn't select the last one, it gets all. how do i fix this. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><style type="text/css">#nav ul li a:last-child{ border-bottom: none;}#nav{width:150px;margin:0;padding:0;list-style-type: none;list-style: none;background-color:#EEE;}#nav ul{height: 20px;list-style-type: none;list-style: none;display: block;margin: 0;text-decoration:none;}#nav ul li a{list-style: none;list-style-type: none;margin:0px;padding:0 10px 0 10px;line-height:35px;float:left;width:150px;background-color:#EEE;border-bottom:2px dotted #ADD8E6;color: #666;text-decoration: none;}#nav ul li a:hover{background-color:#FFF; color: #1E90FF;text-decoration: none;}</style></head><body><div id="nav"> <ul> <li><a href="#" id="1">Home</a></li> <li><a href="#" id="2">About</a></li> <li><a href="#" id="3">Mission</a></li> <li><a href="#" id="4">Media</a></li> <li><a href="#" id="5">Links</a></li> <li><a href="#" id="6">Contact</a></li> <li><a href="#" id="7">Affiliates</a></li> <li><a href="#" id="8">Support</a></li> </ul></div></body></html> Link to comment Share on other sites More sharing options...
Synook Posted November 15, 2010 Share Posted November 15, 2010 That's because the anchor isn't a child of the unordered list - the list items are. If you want to select the anchor child to the last list item of the unordered list, you can use #nav ul li:last-child a. Link to comment Share on other sites More sharing options...
attila2452 Posted November 15, 2010 Author Share Posted November 15, 2010 howcome the anchor isn't the child? Link to comment Share on other sites More sharing options...
Synook Posted November 15, 2010 Share Posted November 15, 2010 Because there's another element between it and the unordered list - the list item. It's a descendant of the unordered list, but not a child, in the same way I'm not a "child" of my grandparents. Link to comment Share on other sites More sharing options...
attila2452 Posted November 15, 2010 Author Share Posted November 15, 2010 Because there's another element between it and the unordered list - the list item. It's a descendant of the unordered list, but not a child, in the same way I'm not a "child" of my grandparents.that makes sense, okay so what if there were more then one link in a list item, would that make the link to be the child element from the list item? Link to comment Share on other sites More sharing options...
Synook Posted November 16, 2010 Share Posted November 16, 2010 The anchors are children of their list item, irrespective of how many there are. That's why the original selector was affecting all the anchors - because they were all last-children, of list items, that were decendants of the unordered list. Link to comment Share on other sites More sharing options...
attila2452 Posted November 16, 2010 Author Share Posted November 16, 2010 The anchors are children of their list item, irrespective of how many there are. That's why the original selector was affecting all the anchors - because they were all last-children, of list items, that were decendants of the unordered list.how would i make it the anchors?li a:last-child{ border-bottom: none;} <div id="nav"> <ul> <li><a href="#" id="1">Home</a></li> <li><a href="#" id="2">About</a></li> <li><a href="#" id="3">Mission</a></li> <li><a href="#" id="4">Media</a></li> <li><a href="#" id="5">Links</a></li> <li><a href="#" id="6">Contact</a></li> <li><a href="#" id="7">Affiliates</a></li> <li><a href="#" id="8">Support</a></li> </ul></div> or maybe span? Link to comment Share on other sites More sharing options...
Synook Posted November 16, 2010 Share Posted November 16, 2010 What do you mean? If you want the anchors of the last list item child to the unordered list with ID "nav", you can do #nav ul li:last-child a. Link to comment Share on other sites More sharing options...
attila2452 Posted November 16, 2010 Author Share Posted November 16, 2010 What do you mean? If you want the anchors of the last list item child to the unordered list with ID "nav", you can do #nav ul li:last-child a.no if i wanted the anchor to be the chid, how would i do that? Link to comment Share on other sites More sharing options...
Synook Posted November 17, 2010 Share Posted November 17, 2010 You would put it directly under the unordered list. But then that would be invalid, as the only allowed child of an unordered list element is the list item element. <ul><a/></ul> <!-- the <a> is child to the <ul>, but it's invalid --> Link to comment Share on other sites More sharing options...
attila2452 Posted November 17, 2010 Author Share Posted November 17, 2010 You would put it directly under the unordered list. But then that would be invalid, as the only allowed child of an unordered list element is the list item element.<ul><a/></ul> <!-- the <a> is child to the <ul>, but it's invalid --> oh alrightis Lists the only thing that have Children items? or can divs too? Link to comment Share on other sites More sharing options...
Synook Posted November 18, 2010 Share Posted November 18, 2010 A child element is simple an element that is enclosed within another element - that element being its parent. For example, the body element is the child of the html element on all HTML pages. Divisions can have various children - paragraphs, lists, other divisions, etc. The rules for what children elements can have are defined in the DTD. For example, divisions cannot have images as children. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.