Hi There, I am learning CSS presently and am having trouble specifically with the child selector. I can't seem to figure out why it is not working. I have searched the forums here, but did not find an answer, so if someone has posted something similar I apologize for repeating an issue but I didn't find anything when I searched. I have done numerous google searches and found websites with example of the child selector being used and working, yet it will not work for me. I have also looked through my textbook and on w3schools.com but to no avail. Before anyone asks yes this is for a school assignment, however I am not being graded for my usage of CSS, only for my HTML use. So now you won't be helping me cheat if you reply to this thread . I don't get marked on CSS usage until my next assignment, so I am using the current assignment to practise my CSS before I actually get marked on it. What I have done is created an unordered list within an ordered list. I need only the li elements that are direct children of the ol element to be bolded, but not the li elements that are children of the ul element. I've used an embedded style as I only need it to display on this page. I've place my style declarations in the head section of the document as follows: <style type="text/css"> ol > li {font-weight:700} </style> What am I doing wrong here that the bolding does not occur? I am aware that I could also apply a class name to each li element I need bolded and adjust my selector accordingly, but that would mean going through a very long list of li elements and typing in a class time several times over again. I'm trying to avoid this if possible. If in the end it is not possible to avoid I will resort to going through it but I'm trying to save myself a little time by using the child selector if I can get it working. Any help here I can get is appreciated. EDIT: Also I am using IE7 as my browser
Hi Chronia, It should look like this instead: ol li {font-weight:700;} Alternatively, you could use "font-weight:bold;" Let me know how it worked, and I wish you the best in your HTML/CSS learning!
Katen, If I omit the > though won't it also affect the li elements present within the unordered list that is nested within the ordered list? I only want it to affect li elements that are a direct child of the ol element but not li elements that are also children of the ul element. For example my html code in the body section looks something like this: <ol> <li>2000</li> <!--- 2000 should be bolded ---> <ul> <li>blah blah</li> <!--- this line and next should not be bold bolded ---> <li>blah blah</li> </ul> <li>2001</li> <!--- 2001 should be bolded ---> <ul> <li>blah blah</li> <!--- this line and next should not be bolded ---> <li>blah blah</li> </ul> </ol> So in this example I only want it to affect the li elements containing the two years 2000 and 2001, but not the li elements that are part of the ul element and contain the blah blah texts. I have also tried using the keyword bold instead of the numeric value of 700 for the font-weight but it still doesn't work for me and the text appears unbolded. Any thoughts?
Have you tried taking it out yet? If not, then read on... In order to target the unordered list you'd need to say "ul li{...}". However, you're already specifying that you're targeting the ordered list with "ol li". (This is first pointing to the ol tag and then to the li tag contained within.) Make sense? EDIT: You know what, I apologize: I just looked quickly at the code above... I should've looked closer. What I already stated still applies, but, this is what should work: ol li{font-weight:bold;} ol li ul li{font-weight:normal;} This way you specify that you don't want the list items of the ul to be bold. Hope that helps!
Even so, > should have worked (except of course in IE6, ancient and stupid). ol>li { font-weight: bold; } should have correctly targeted any li's that were direct children, rather than grand or great grand children of the ol. Except in IE6. The whole font-weight in numbers thing is BS. Some guy at Apple? thought that system up, for making multiple weights of fonts, but most fonts don't have more than 2: normal and bold. And if you need bolder, you'll likely need a whole different font (because CSS doesn't exactly use the correct definition of font) like instead of bold and arial, you might need arial black. Instead of Cooper Black, you might need Cooper Black BT. *edit I wish I could find where I first stumbled on this... I was reading about a font someone at a software co had made (apple?) and that person had set up this 100 200 300 numbering system... can't find a trace of it now... So ignore the number system. Most browsers will only look to see if you are above or below 700 I think it is. FF3/Mac apparently CAn do it but the user still needs all versions installed on their machine of that font. If this is still the case after trying katendarcy's code, something else is going on-- you may not be affecting that element at all, or being overridden by something else (so, try setting the ol's background colour to red-- an easy check I do often).
@Stomme poes: I've heard you say something like that before... and I thought it was funny because I often do the same thing! Using background colors and even borders in troubleshooting is very helpful!
my lifeline-- both for real basic punching hit-and-miss (am I even affecting the area AT ALL?) and for dealing with things like floats-- though when I'm lazy I'll Aardvark through stuff as well. But bg's work better than aardvark actually-- and yeah I've also used borders but mostly to see float enclosure, since the borders of course add to heights and widths and can reshuffle things around sometimes.
@Stomme poes: For sure... they can be helpful at times, as you said, but I definitely prefer backgrounds too. I've actually been planning on adding that as a tip on my blog. (I wrote the post I just have to add it...) Hmmm.... maybe I'll do that today! But yeah, for finding discrepancies between browsers, even if it's just a few pixels off, it can be a huge help. Recently I had a site up in a test area and was trying to troubleshoot with a client re: a certain section of the site. I told her: "You're going to see some funky background colors, but don't be scared! It helps me know what goes where." Take care!
Professional web developers don't use IE and neither should you. Always, test markup in a modern browser, never any version of IE until you know what you wrote works in the modern browsers. Child selectors, as stomme said, do not work in IE6 but they are also buggy in IE7 but I forgot what the conditions are and I'm not where I can look it up right now.
Hey Everyone, Thanks so much for all your helpful advice! Katen, I used your code with a slight modification to the second part, instead of ol li ul li {font-weight:normal} I used ol ul li {font-weight:normal} and it worked like a charm. Stomme, thanks for the info about fonts, I really didn't understand the number system either, when 2 words make more than enough sense vs 9 sets of numbers, plus I never really though you could double bold text anyways, if you can't do it in a word processor (except with fonts that are already bold in the "normal" display) why would it work on a webpage? lol I hadn't thought of using background colours or borders for trouble shooting before either. This will definitely be helpful in the future for sure. Thanks very much for every ones help! It's very much appreciated!