A really neat css trick

So, you know how sometimes you just need to get to an element of a certain number with your style rules but you cannot use an additional selector? Well there is a way, though not many people seems to know about it.

Pseudo-selector nth-child is the answer. The simpliest way to use it is to feed it with a single number, say

ul li:nth-child(3) {
   display:none;
}

will make a third element of the list disappear, and that is with css only no js whatsoever. But threre is more, say you will feed it with a simple expression like

ul li:nth-child(2n+1) {
  display:none;
}

What will it do? It will hide every element, that has odd number, of the list.

It works like this - n is getting interger values, and the style is applied to the expression result:
(2x0)+1 = 1 //applied to first element
(2x1)+1 = 3 //third element
....
(2x10)+1 = 21
etc

So with a little of basic math it's really easy to get any style pattern you want.

Selector will also work with "odd" or "even" pharses which are self-explainatory, example

ul li:nth-child(odd) {
  display:none;
}

would affect all elements of the list that have odd numbers (as you probably noticed it would give completely equal result as  2n+1 expression).

It's really cool and very easy to use once you get a little into it, there is a downside however, guess what browser claims no support of the feature and, whille works with it, actually produces really weird results, especially when it handles 0? TADAH of course it's IE. Though there are tons of features we had to give up if we are to seriously consider IE a browser :-)
 
I hope this info was of use to you.

Sharing links on some good navigation menu solutions

Earlier this month i was trying to find a tree-view navigation menu to embend into a friend's web-site, one wouldn't expect that but people actually are willing to sell you one, anyhow i found this after a quick search

http://www.treeview.net/ - it's a free tree view menu, which is easy to install and use. Download package also provides demos, examples, guides and such (too many of them even, might scare off a user who just want a copy&paste thing, if you are that user you should just ignore them, untill you want to do a little customizing). In default state it looks like this  

And all you need to do is copy&paste the code, as well as one .css and one .js file. Took me about 5 minutes to set it up, from the moment i found a web-site. Have nothing good to say about customizing, but nothing bad either, it's pretty much as you expect customizing to be :-)

And, to not make a second post about navigation, if you would like a more standart drop-down menu, you should definately use jquery one, it's pretty straight forward, can see one, say, here

http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

And it does exactly what it should do - a simple drop-down menu. Plus some extra features like more smooth timing of menu disappearing and such.

I hope that information was useful.