CSS selectors: How to select only first level of li elements?

What kind of markup is <mainmenu>?

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 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

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.

), it doesn't work, and I wasn't complaining, shish... I was only asking for help, this doesn't require so much imagination, as to say that mainmenu is ID .

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.

#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 times. I can't get my fingers to do what my head says.

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>

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 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?

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 this:

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.

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 usuall.. restyle sublevels by hand.