CODEWITHSUNDEEP
csspseudo-classcss-selectors
Nasser
Nasser

Reputation: 159

Last child CSS3

I need to delete the left-border from the first item and the right-border from the fourth item in a list without affecting any of the sub lists of those items. How can I do this?

My code for the menu list is:

<div id="menu">
  <ul><li><a href="#">First Item</a><ul>
  <li><a href="#">First Sub Item</a></li>
  <li><a href="#">Second Sub Item</a></li>
  </ul></li></ul>

  <ul>
    <li><a href="#">Second Item</a>
      <ul>
        <li><a href="#">First Sub Item</a></li>
        <li><a href="#">Second Sub Item</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#">Third Item</a>
      <ul>
        <li><a href="#">First Sub Item</a></li>
        <li><a href="#">Second Sub Item</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#">Fourth Item</a>
      <ul>
        <li><a href="#">First Sub Item</a></li>
        <li><a href="#">Second Sub Item</a></li>
      </ul>
    </li>
  </ul>
</div>

that is the code i add border with 

#menu ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; }

and i used this code to delete the border from the first child 

#menu ul:first-child a { border-left: 0px; }

it works perfectly but when i do the same to delete from last-child ,, it effects the sub items ul li ul li a not ul li a

i can't manually add class to last child as it comes dynamically so i don't know how many items the admin will add at the future

Upvotes: 1

Views: 835

Answers (3)

Manish Sharma
Manish Sharma

Reputation: 1720

try this one

#menu  ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; color:#000; }

#menu > ul:first-child > li > a { border-left: 0px;} 

#menu > ul:last-child > li > a { border-right: 0px}

Upvotes: 1

Kyle Macey
Kyle Macey

Reputation: 8154

First Item:

#menu ul:first-child

Last Item:

#menu ul:last-child

For full browser compatibility, add another class to the first and last elements

 <ul class="first-list">
  <li><a href="#">First Item</a><ul>
  <li><a href="#">First Sub Item</a></li>
  <li><a href="#">Second Sub Item</a></li>
  </ul></li></ul>

  <ul>
    <li><a href="#">Second Item</a>
      ...

  <ul class="last-list">
    <li><a href="#">Fourth Item</a>
      <ul>
        <li><a href="#">First Sub Item</a></li>
        <li><a href="#">Second Sub Item</a></li>
      </ul>
    </li>
  </ul>

.first-list {}
.last-list {}

Most languages support detectors for first and last entries in queries or arrays.

OR

If you're using jquery, you can select like so:

$('#menu ul:first').addClass('first-list')

Upvotes: 0

Stephan Muller
Stephan Muller

Reputation: 27640

#menu ul:first-child { border-left: 0; }
#menu ul:last-child { border-right: 0; }

Note that last-child isn't supported in IE until IE9. First-child should work in IE7 and up.

Upvotes: 1

Related Questions