Hi, never used css selectors extensively, but decided it's time to learn them. I was reading on w3, and figured that > selector should do, but it only works for some things.
Here's sample menu code:
<mainmenu class="leftF"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Services</span></a> <ul> <li><a href="#"><span>Logo Design</span></a></li> <li><a href="#"><span>Web Design</span></a></li> <li><a href="#"><span>Web Developement</span></a></li> <li><a href="#"><span>Web Hosting</span></a></li> <li><a href="#"><span>Aplication Developement</span></a></li> </ul> </li> <li><a href="#"><span>About Us</span></a></li> <li><a href="#"><span>Contact Us</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Lab</span></a></li> </ul> </mainmenu>
And here's the css:
mainmenu ul { list-style-type:none; margin:0; padding:0; } mainmenu > ul > li { float:left; line-height:30px; font-weight:bold; padding:0 15px; } mainmenu ul li a { text-decoration:none; color:#000; }
Now, note that under mainmenu > ul > li, float left is only applied to the first li element, but lineheight and bold are applied to ul li ul li as well. So, how do I only apply this to the first li level?
I usually corrected styling manually for those sub-levels, but it's getting annoying.
Thanks in advance
What kind of markup is
What kind of markup is <mainmenu>?
You have, first, to have
You have, first, to have valid html. Only certain tags are allowed, and you cannot make up your own tags! <mainmenu> is not an allowed html tag. Any markup that contains such a tag is invalid, and that throws the CSS standard right out the window. Every browser can do as it likes and you have nothing to complain about.
Before you worry about complicated stuff you need to get the basics right! Standards out requires standards in.
cmn. guys... havent you heard
cmn. guys... havent you heard of HTML5, new age XD. Anyway, works the same way if I apply id of main menu to a div element. Don't be so strict
Even advanced stuff
I know quite advanced stuff, but really never payed attention to a selectors (ok, :hover doesn't count). tested this in google chrome with valid html5, also tested with html4 (e.g.
BlackArts wrote: cmn. guys...
cmn. guys... havent you heard of HTML5, new age XD. Anyway, works the same way if I apply id of main menu to a div element. Don't be so strict
There is <nav> in HTML5 but not <mainmenu>. The reason for the strictness is because you expect predictable results. Aw, now I forget what we're talking about. BRB, reading OP again.
Oh, now I remember. :p
#mainmenu ul li a
comes after #mainmenu > ul > li > a
and carries the same specificity. Try switching their order in the styling.
Man, I had to edit that 16
Man, I had to edit that 16 times. I can't get my fingers to do what my head says.
html5 allows custom tags to
html5 allows custom tags to some extent, and this one should work fine, checked nav immediately after noresults from my first test (mainmenu episode), but with same result. Again, as I asked earlier, if you really got that thrown out with that tag, can some tell me how to select only first level of elements, because
<div id="nav"> <ul> <li>...</li> <li>...</li> <li>...</li> <li>... <li>...</li> <li>...</li> </li> ... </div>
doesn't work with that css
khm... ok... I don't have
khm...
ok... I don't have problem with link styling in menu (not yet).
Imagine suckerfissh menu... Horizontal one. Now, it has unordered list. That list has, let's say.. 5 elements. Now... 5th element have sub level that is formed like this
- Sub element
problem is, I want only Top level elements (element from 1 to 5) to be bold, and theyr "drop down" menus to be inaffected with that bold property.
Hope you understand now.
again, my code:
/*nav, if you insist, but it's not necessary*/ nav ul { list-style-type:none; margin:0; padding:0; } nav ul li a { text-decoration:none; color:#000; } nav > ul > li { float:left; line-height:30px; font-weight:bold; padding:0 15px; }
html(5):
<div id="top" class="100p leftF"> <a href="#" id="logo" class="leftF"><h1>BlackArts</h1></a> <nav class="leftF"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Services</span></a> <ul> <li><a href="#"><span>Logo Design</span></a></li> <li><a href="#"><span>Web Design</span></a></li> <li><a href="#"><span>Web Developement</span></a></li> <li><a href="#"><span>Web Hosting</span></a></li> <li><a href="#"><span>Aplication Developement</span></a></li> </ul> </li> <li><a href="#"><span>About Us</span></a></li> <li><a href="#"><span>Contact Us</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Lab</span></a></li> </ul> </nav> </div>
I've been inspecting a
I've been inspecting a little, and find out that if I write:
nav > ul > li { line-height:30px; font-weight:bold; padding:0 15px; }
sublevels (ul li ul li) will only take line-height, and bold property, but not font-weight property. But.. if I write:
nav > ul li { line-height:30px; font-weight:bold; padding:0 15px; }
sublevels will take all of the properties.
Any ideas?
BlackArts wrote: html5 allows
html5 allows custom tags to some extent
Custom elements go against having a standard like HTML5. Standards map out the set of elements, attributes, and APIs that the browsers need to implement so web developers can use them, and they provide those developers with a common approach to marking up a web page.
Did you miss
Did you miss this:
#mainmenu ul li a
comes after #mainmenu > ul > li > a
and carries the same specificity. Try switching their order in the styling.
no... I commented that
no... I commented that earlier. Does code I supplied works fine for you? Have anyone maybe tried it?
Now to think of it.. have you ever used > selector this way? I mean, you probably have, but how do you stop css leaking to sub level elements. I tried swapping properties, as you suggested earlier, but no effect.
Deuce wrote: BlackArts
html5 allows custom tags to some extent
Custom elements go against having a standard like HTML5. Standards map out the set of elements, attributes, and APIs that the browsers need to implement so web developers can use them, and they provide those developers with a common approach to marking up a web page.
Html allways had support for custom elements, even though it wasn't semantic, and those elements sometimes had to be created in a browser by means of javascript. Never the less, I need this custom tags, becouse they'll make my job easier later since I'll be retrieving some information from a webpage with an application, but let's not get too deep into that, and focus on a current problem .
And one last thing, there's no point in having standards if browsers are using different webkits, rendering and stuff either, cos even right now, some very simple styling and markup renders differently in different browsers (although it's a small difference, and I'm not counting ie).
ok, nevermid. I'll just go as
ok, nevermid. I'll just go as usuall.. restyle sublevels by hand.