15 replies [Last post]
BlackArts
BlackArts's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT+1
Joined: 2010-12-07
Posts: 9
Points: 10

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 Wink

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

What kind of markup is

What kind of markup is <mainmenu>?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

BlackArts
BlackArts's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT+1
Joined: 2010-12-07
Posts: 9
Points: 10

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 Smile

BlackArts
BlackArts's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT+1
Joined: 2010-12-07
Posts: 9
Points: 10

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

BlackArts wrote: cmn. guys...

BlackArts wrote:

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 Smile

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

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.

BlackArts
BlackArts's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT+1
Joined: 2010-12-07
Posts: 9
Points: 10

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

BlackArts
BlackArts's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT+1
Joined: 2010-12-07
Posts: 9
Points: 10

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

  • 5th element
    • 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>

    BlackArts
    BlackArts's picture
    Offline
    newbie
    Last seen: 9 years 45 weeks ago
    Timezone: GMT+1
    Joined: 2010-12-07
    Posts: 9
    Points: 10

    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?

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 3 years 14 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    BlackArts wrote: html5 allows

    BlackArts wrote:

    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.

    all ยป http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    Verschwindende
    Verschwindende's picture
    Offline
    Guru
    Last seen: 18 weeks 5 days ago
    Timezone: GMT-4
    Joined: 2009-10-09
    Posts: 2043
    Points: 2268

    Did you miss

    Did you miss this:

    Verschwindende wrote:

    #mainmenu ul li a comes after #mainmenu > ul > li > a and carries the same specificity. Try switching their order in the styling.

    BlackArts
    BlackArts's picture
    Offline
    newbie
    Last seen: 9 years 45 weeks ago
    Timezone: GMT+1
    Joined: 2010-12-07
    Posts: 9
    Points: 10

    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.

    BlackArts
    BlackArts's picture
    Offline
    newbie
    Last seen: 9 years 45 weeks ago
    Timezone: GMT+1
    Joined: 2010-12-07
    Posts: 9
    Points: 10

    Deuce wrote: BlackArts

    Deuce wrote:
    BlackArts wrote:

    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 Smile.
    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).

    BlackArts
    BlackArts's picture
    Offline
    newbie
    Last seen: 9 years 45 weeks ago
    Timezone: GMT+1
    Joined: 2010-12-07
    Posts: 9
    Points: 10

    ok, nevermid. I'll just go as

    ok, nevermid. I'll just go as usuall.. restyle sublevels by hand.