Why is my CSS `ul li ~ li` not adjusting one of my HTML elements?

Question

I have added a snippet to show you where I got to below.

I do not understand why I have the following problem...

The home element is inside the ul like the rest of the navigation bar elements. But why is the bottom two styles inside the CSS file is adjusting and applying styles to all other elements but not home?...

Can someone explain where I am going wrong.. so confused..

body {
  margin-top: -15px;
  margin-left: 0;
  margin-right: 0;
  font-family: "Arial", serif;
}

img{
  height: 100px;
}

.nav {
  background-color: rgb(0,44,68);
  list-style: none;
  text-align: center;
  padding: 10px 0 2px 0;

}

.nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
  align-items: center;
  font-size: 20px;
  font-family: Calendas-Plus;
}

.nav li{
  list-style: none;
  display: inline-block;
}

.nav a {
  color: white;
  text-decoration: none;
}


ul li {
  display: inline-block;
  padding: 0 10px;

}
ul li ~ li {
  border-right: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="styling.css" type="text/css">


  </head>
  <body>



<div class="nav">
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Products</a></li>
  <li><img src="logo.png"></li>

  <li><a href="/">Services</a></li>
  <li><a href="/">News</a></li>
  <li><a href="/">Contact</a></li>
  </ul>
</div>




  </body>

<script src="app.js" charset="utf-8"></script>

</html>

is there any reason you cannot use `ul li` instead of `ul li ~ li`? — Dev Man, May 15 '19 at 19:55
It's unclear what you're asking. The styles are working exactly as they should - all four border locations are getting a solid 1px white border for each li element after the "home" one. If this is not what you want, please edit your question to explain your desired outcome. — TylerH, May 15 '19 at 20:05

score 3 · Accepted Answer · answered May 15 '19 at 19:52

The general sibling combinator "~" separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

So you are applying this style:

ul li ~ li {
  border-right: 1px solid white;
  border-left: 1px solid white;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

only to li elements that have a sibling <li> before them:

Consider this:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b matches the 4th and 5th list item because they:

Are .b elements

Are siblings of .a

Appear after .a in HTML source order.

The answer on this question describes it very clearly:

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

Why is my CSS `ul li ~ li` not adjusting one of my HTML elements?

1 Answers1