How can I select second element and after that in CSS?

Question

I want to select element tags in html with CSS. For example, how can I select second li a Plus any thing after that in one UL. I want to set left-margin for second li plus any after that. First <li><a> do not move to right and fix, but other move to right with margin-left

        <ul style="list-style:none;">
        <li>
            <a href="#">Contact Us</a>
        </li>
        <li>
            <a href="#">Home</a>

        </li>
        <li>
            <a href="#">Project</a>
        </li>
        <li>
            <a href="#">aboutUs</a>
        </li>
    </ul>

ContactUs Home Project aboutUs I want to keep margin-left of ContactUs and do not go to right ,but set margin-left after second li with 50px for home + project + aboutUs;

Answer 1

This should do it for you: http://jsfiddle.net/MFtU2/1/

ul > li:not(:first-child) {
  margin-left: 50px;
}

If you wish to support legacy browsers that do not support the CSS3 :not() selector, your best bet is to select the first li and give it margin:0; while giving all li a margin of 50px: http://jsfiddle.net/MFtU2/3/

ul.ie8safe > li:first-child {
  margin-left: 0;
}

ul.ie8safe > li {
  margin-left: 50px;
}

EDIT:

Given that the OP has changed the parameters of the question slightly, I figured I'd update my answer. In addition to wanting to target all lis other than the first, you also want to get them to display on the same horizontal plane. To do this, you'll want each li to take up the minimum amount of space possible since, by default, each li will take up the full width of the containing ul. There are a couple ways to do this, but I prefer using float: left;

ul > li {
  float: left
}

ul > li:not(:first-child) {
  margin-left: 50px;
}

I've attached an updated fiddle to show what this would look like. Note that this technique will work across legacy browsers as well as newer ones.