CODEWITHSUNDEEP
htmlcsscss-selectorsoverriding
Oh boy do I try
Oh boy do I try

Reputation: 43

CSS last-child not overriding parent border

First of all let me start by saying I'm fairly new to CSS, mostly done styling inline. What I'm doing is using an <ul> as a menu, where the <li> items are menu items. Right borders are used as dividers between the menu items, but visually it would be better if the last menu item doesn't have the right border.

CSS code

.gf-menu.l1 > li > .item:after
{
    border-right: 1px solid #E3E3E3;
    bottom: 0;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
}
.gf-menu.l1 > li:first-child
{
    margin-left: 5px;
}
.gf-menu.l1 > li:last-child 
{
    margin-right: 5px;
    border-right: 0;
}

HTML

<ul class="gf-menu l1 ">
    <li class="item487">
        <a class="item" href="link1">
            menu_item_1
        </a>      
    </li>
    <li class="item488">
        <a class="item" href="link2">
            menu_item_2
        </a>      
    </li>
    <li class="item489">
        <a class="item" href="link1">
            menu_item_2
        </a>      
    </li>
</ul>

I can only assume it has something to do with the after element as the margin is actually being added in the right place, but I can't figure it out.

Thanks in advance.

Upvotes: 2

Views: 616

Answers (3)

Alexis B.
Alexis B.

Reputation: 1115

You don't need any :after.

Here is a solution with a few advices:

https://jsfiddle.net/c4Lrmpfx/

.gf-menu.l1 {
   list-style: none;
}
.gf-menu.l1 > li {
   float: left;
   text-align: center;
}
.gf-menu.l1 > li a.item {
   /* Better to apply the style to the A instead of the LI,
       also to style the clickable area */
   display: block;
   padding: 10px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.1);   
}
.gf-menu.l1 > li a.item:hover {
   background-color: rgba(0,0,0,0.2);
}

.gf-menu.l1 > li:not(:last-child) a.item{
   border-right: 1px solid #000;
}
<ul class="gf-menu l1 ">
    <li class="item487">
        <a class="item" href="link1">
            menu_item_1
        </a>      
    </li>
    <li class="item488">
        <a class="item" href="link2">
            menu_item_2
        </a>      
    </li>
    <li class="item489">
        <a class="item" href="link1">
            menu_item_2
        </a>      
    </li>
</ul>

Here I used the selector :not instead of having an other line to define the last-child as border-right: 0;

Here :not specifies that the :last-child won't be included for the following properties.

Upvotes: 2

DylanB
DylanB

Reputation: 431

It looks like you're not far off... If you're trying to get them to display next to each other then you need to change your CSS to:

gf-menu.l1 li {
display: inline;
border-right: 1px solid black;
}

Upvotes: 1

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

I've used your HTML and wrote minimal CSS for you to understand

TIP : Give classes and id's name which have semantic meaning to it. It is difficult to code when you give class names like these.

.gf-menu.l1 li {
    display: inline-block;
    padding: 0 10px 0 10px;
    border-right: 1px solid red;
}

.gf-menu.l1 li:last-child {
    border-right: none;
}
<ul class="gf-menu l1 ">
    <li class="item487">
        <a class="item" href="link1">
            menu_item_1
        </a>      
    </li>
    <li class="item488">
        <a class="item" href="link2">
            menu_item_2
        </a>      
    </li>
    <li class="item489">
        <a class="item" href="link1">
            menu_item_2
        </a>      
    </li>
</ul>

Upvotes: 3

Related Questions