CODEWITHSUNDEEP
htmlcsshtml-lists
RhZ
RhZ

Reputation: 131

floating part of a ul

I have a fairly basic question.

I have a page with a ul with 7 lis, spanning 100% of the page. I want to make the last three lis float to the right, and I want the very last one to be a different color. I am trying not to recode this more than necessary.

Here is the code, how shall I apply the css? Make another ul, (but would it stay in line with the other) or apply to the li directly? can I make a special class of li to let those last three be positioned in a different place?

<html>
  <head>
    <style>
      ul {
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
      }
      a {
        width:6em;
        text-decoration:none;
        color:white;
      }

    </style>
  </head>

  <body>
    <ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
      <li><a href="#">Link five</a></li>
      <li><a href="#">Link six</a></li>
      <li><a href="#">Link seven</a></li>
    </ul>
  </body>
</html>

Upvotes: 0

Views: 76

Answers (5)

ooopsoft
ooopsoft

Reputation: 440

You can use this code:

(the rule would applies regardless of how many "li" will be)

li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
  text-align: right;
}
li:last-child{
color: red;
}

Upvotes: 0

SKeurentjes
SKeurentjes

Reputation: 1878

You could use :nth-child() for this. css-tricks.com/how-nth-child-works

li:nth-child(5),
li:nth-child(6),
li:nth-child(7) {
    text-align: right;
}

li:nth-child(7) a {
    color: red;
}

example: http://jsfiddle.net/skeurentjes/3RR8D/

Upvotes: 2

AndrewWhite
AndrewWhite

Reputation: 310

you need this 

li:nth-child(6)  {
        text-align: right;
      }
      li:nth-child(7) a {
        color: red;
      }

Upvotes: 0

Greevman
Greevman

Reputation: 66

Try something like this 

<li><a href="#">Link one</a></li>
  <li><a href="#">Link two</a></li>
  <li><a href="#">Link three</a></li>
  <li><a href="#">Link four</a></li>
  <li><a class="float" href="#">Link five</a></li>
  <li><a class="float" href="#">Link six</a></li>
  <li><a class="float" id="last" href="#">Link seven</a></li>

css

.float{
float:right;
}
#last{
color:red;
}

Upvotes: 0

pavel
pavel

Reputation: 27082

You can use this code without adding another list or classes.

li:nth-child(4) ~ li {text-align: right;} /* or float? */
li:last-child a {color: green;}

Upvotes: 0

Related Questions