Adding separator line between menu items (pseudo-class ignored)

Question

I am trying to achieve a divider line between menu items in a Concrete5 site, and tried to implement by adding a border-right to each menu item and then using the :first-child pseudo class to add a separator before the first one. However, the pseudo class is being ignored and borders are being added to both sides of each menu item. Here is the code:

.top-bar-section ul li > a {
    display: block;
    width: 100%;
    color: white;
    padding: 12px 0 12px 0;
    padding-left: 15px;
    font-size: 0.8125em;
    font-weight: bold;
    background: #0D42C0; 
    border-right: 1px solid white;
}
    .top-bar-section ul li > a:first-child {
          border-left: 1px solid white;
}

I don't know the exact structure of the HTML menu that is being produced by the CMS, but these selectors seem to be working. Not sure if there is anything else needed to help with this issue. Let me know if more information is needed to diagnose this problem.

Any help is very appreciated!

Answer 1

All of the <a>s are first children of their respective <li>s. You need to target the first <li> instead. Try this:

.top-bar-section ul li:first-child > a {
      border-left: 1px solid white;
}

For future reference, please include your HTML in the question.