Style first list item differently
in [CSS]
|
Prev: Setting the width of columns in a table
Next: Can I refer width value not to the parent container cascade but to the current top browser window?
From: Axel on 3 Feb 2010 10:39 Hi, I'm working on design a theme on a Drupal installation and like to style the first list item of a list differently than the rest.. Shouldn't this do it? (the first list item shall have no padding in contrary to the rest): ul.links li { display: inline; list-style-type: none; padding: 0 0.5em; } ul.links:first-child li { padding:0; } Well it doesn't.. :-( Does someone have an idea, why it doesn't? Thanks, Axel
From: Johannes Koch on 3 Feb 2010 10:54 Axel schrieb: > Hi, > > I'm working on design a theme on a Drupal installation and like to style > the first list item of a list differently than the rest.. > > Shouldn't this do it? (the first list item shall have no padding in > contrary to the rest): > > ul.links li { > display: inline; > list-style-type: none; > padding: 0 0.5em; > } > > ul.links:first-child li { > padding:0; > } > > Well it doesn't.. :-( Does someone have an idea, why it doesn't? <http://www.w3.org/TR/CSS21/selector.html#first-child>: The :first-child pseudo-class matches an element that is the first child element of some other element. You want to select the li that is the first child of the ul, right? -- Johannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.)
From: Jonathan N. Little on 3 Feb 2010 12:19 Axel wrote: > Hi, > > I'm working on design a theme on a Drupal installation and like to style > the first list item of a list differently than the rest.. > > Shouldn't this do it? (the first list item shall have no padding in > contrary to the rest): > > ul.links li { > display: inline; > list-style-type: none; > padding: 0 0.5em; > } > > ul.links:first-child li { > padding:0; > } > > Well it doesn't.. :-( Does someone have an idea, why it doesn't? ul.links li:first-child { padding: 0; } -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Jukka K. Korpela on 3 Feb 2010 12:35
Axel wrote: > I'm working on design a theme on a Drupal installation and like to > style the first list item of a list differently than the rest.. The safest way is to assign a class attribute to each first list item and use a class selector. It's boring of course, and using :first-child gives a fairly good browser coverage these days. > ul.links:first-child li { > padding:0; > } As others have pointed out, :first-child means "an element that is the first child of some element", not "the first child of this element". Thus, the correct selector for the purpose is ul.links li:first-child But please note that whenever you set left padding for a li element, you should also set left margin for it, too, and also left padding and margin for the enclosing element, ul or ol. The reason is that different browsers have different defaults for these properties for these elements, so that they use different methods to reserve space for the list markers. If you only set, say, padding to zero, you might kill that space entirely on some browsers. -- Yucca, http://www.cs.tut.fi/~jkorpela/ |