0

I have the following list:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="container"></li>
    <li class="container"></li>
    <li class="container"></li>
    <li></li>
</ul>

I am trying to create a top- and bottom-border on the container class elements, but only the first and last must have this border.

I tried to use CSS for this, but the first-child and last-child selectors do not do what I was expecting:

CSS: 

.container:first-child {
   border-top: 1px solid #000;
   padding-top: 10px;
}

.container:last-child {
   border-bottom: 1px solid #000;
   padding-bottom: 10px;
}

Is there a way to dynamically add top- and bottom-borders with just these classes using CSS?

Harry
  • 87,580
  • 25
  • 202
  • 214
PIDZB
  • 903
  • 1
  • 15
  • 38
  • there can be a way to achieve this without nth- nor :first, ... i cannot give the answer to the duplicate since the case is different but: if this answers your question http://codepen.io/gcyrillus/pen/reOqNo , it might be possible to answer and unmarked your question here – G-Cyrillus Mar 05 '16 at 13:52
  • You could also have a look at [this thread](http://stackoverflow.com/questions/33152053/adding-top-and-bottom-border-to-a-group-of-selected-elements-using-css/33152261#33152261). it is pretty similar to what you need (and GCyrillus' demo above). I thought of using this for dupe closure but BoltClock's answer in the other one was way more informative and so used that. – Harry Mar 05 '16 at 13:58

0 Answers0