Border-Top on only second nav ul li

29 Views Asked by At

Im trying to get a top boarder on the second list, "chapter 2" in my nav ul li to section it off from the nav ul ul. Heres the code:

nav {
  text-align: center;
  border: 2px solid #370d6b;
  border-radius: 2rem;
  margin: 0.5rem auto 1rem;
  max-width: 300px;
  font-size: 1.25rem;
  line-height: 2rem;
  border-color: #ffffff;
  color: #ffffff;
}

nav ul {
  list-style: none;
  margin: 5px auto 5px -20px;
}

nav ul ul {
  position: relative;
  font-size: 1rem;
  line-height: 1rem;
  border-top: 1px solid #ffffff;
  border-margin: -10px;
  margin: -2px -10Spx 8px auto;
  padding: 20px auto 20px auto;
  padding-left: 0px;
  list-style: url(img/dark_dudington.png) inside;
}

nav li a {
  display: block;
}

nav li a,
li a:visited {
  text-decoration: none;
  color: #ffffff;
}

nav li a:hover,
li a:focus {
  color: #ffffff;
  text-decoration: underline;
  background-color: #46146e;
}
<nav>
  <ul>
    <li><a href="#New_Horizons">Chapter 1: New Horizons</a>
      <ul>
        <li><a href="#A_Mind_Made-Up">A Mind Made-Up</a></li>
        <li><a href="#Difficulty_Launching">Difficulty Launching</a></li>
      </ul>
    </li>
    <li><a href="#Chapter2">Chapter 2</a>
      <ul>
        <li><a href="#Chapter2">**PH_1</a></li>
        <li><a href="#Chapter2">**PH_2</a></li>
      </ul>
    </li>
  </ul>
</nav>

Ive tried div code and second-child pseudo-class and a couple very basic methods, but as I am fairly new Im sure I havent exhausted my options.

1

There are 1 best solutions below

0
IT goldman On

nav>ul will select the immediate child of the <nav> which is the first list. Then all we need is to add border-top to the 2nd child list (or every non first list).

I've ended up adding this css:

nav>ul>li:not(:first-child) {
  border-top: 10px solid red;
}

nav {
  text-align: center;
  border: 2px solid #370d6b;
  border-radius: 2rem;
  margin: 0.5rem auto 1rem;
  max-width: 300px;
  font-size: 1.25rem;
  line-height: 2rem;
  border-color: #ffffff;
  color: #ffffff;
}

nav ul {
  list-style: none;
  margin: 5px auto 5px -20px;
}

nav ul ul {
  position: relative;
  font-size: 1rem;
  line-height: 1rem;
  border-top: 1px solid #ffffff;
  border-margin: -10px;
  margin: -2px -10Spx 8px auto;
  padding: 20px auto 20px auto;
  padding-left: 0px;
  list-style: url(img/dark_dudington.png) inside;
}

nav li a {
  display: block;
}

nav li a,
li a:visited {
  text-decoration: none;
  color: #ffffff;
}

nav li a:hover,
li a:focus {
  color: #ffffff;
  text-decoration: underline;
  background-color: #46146e;
}

nav>ul>li:not(:first-child) {
  border-top: 10px solid red;
}
<nav>
  <ul>
    <li><a href="#New_Horizons">Chapter 1: New Horizons</a>
      <ul>
        <li><a href="#A_Mind_Made-Up">A Mind Made-Up</a></li>
        <li><a href="#Difficulty_Launching">Difficulty Launching</a></li>
      </ul>
    </li>
    <li><a href="#Chapter2">Chapter 2</a>
      <ul>
        <li><a href="#Chapter2">**PH_1</a></li>
        <li><a href="#Chapter2">**PH_2</a></li>
      </ul>
    </li>
  </ul>
</nav>