CODEWITHSUNDEEP
htmlcsscss-selectors
casa
casa

Reputation: 23

Remove border with :first-child :before

I have read a lot of examples and snippets but I can't figure it out how to solve this problem. I have a list element with a sub-list. then I have a border-top for all these elements. I am managing to remove the first border top but it does not work, not even with classes.

Here is the code.

    <ul>
        <li><a href="#">ABOUT OWSD</a></li>
        <li><a href="#">WHY OWSD</a>
            <ul>
                <li><a href="#">Objectives</a></li>
                <li><a href="#">Women and Gender</a></li>
                <li><a href="#">Success stories</a></li>
                <li><a href="#">Gender insite</a></li>
                <li><a href="#">Partners</a></li>
            </ul>
        </li>
        <li><a href="#">NETWORK</a></li>
        <li><a href="#">CAREER DEVELOPMENT</a></li>
        <li><a href="#">RESOURCES</a></li>
        <li><a href="#">RESOURCES</a></li>
    </ul>   
</nav>

nav a {
  display: block;
  text-decoration: none;
}



ul li a{
  position: relative;
  left: 0px;
  color: #1d5237;
  background-color: #1a1a1a;
  font-weight: 600;
  font-size: 16px;
  padding: 20px 0px 20px 20px;
  width: 100%;
}


ul li a::before{
  content: '';
  border-top: 1px solid #1d5237;
  position: absolute;
  top: 1px;
  width: 100%;
}


ul li a:hover,
ul li a:active,
ul li a:focus{
  color: #4a9367;  
}



li ul li a{
  position: relative;
  display: noe;
  left: 0px;
  color: #cccccc;
  background-color: #2a2a2a;
  font-weight: 400;
  font-size: 16px;
  padding: 18px 0px 18px 37px;
  width: 100%;
}


li ul li a::before{
  content: '';
  border-top: 1px solid #666666;
  position: absolute;
  top: 1px;
  width: 100%;  
}


li ul li a:hover,
li ul li a:active,
li ul li a:focus{
  color: #cccccc;
}

Also, I reach my second list element with li ul li a is this correct? Is there a way better to write it?

Upvotes: 2

Views: 1341

Answers (2)

Venkatesh Panabaka
Venkatesh Panabaka

Reputation: 2154

I commented unwanted line in your css code.(sorry to commented background color it is not viewable)

Here is the work example of your code

ul li a{
  position: relative;
  left: 0px;
  color: #1d5237;
  /*background-color: #1a1a1a;*/
  font-weight: 600;
  font-size: 16px;
  padding: 20px 0px 20px 20px;
  width: 100%;
}


ul li a::before{
  content: '';
  border-top: 1px solid #1d5237;
 /* position: absolute;*/
  top: 1px;
  width: 100%;
}


ul li a:hover,
ul li a:active,
ul li a:focus{
  color: #4a9367;  
}



li ul li a{
  position: relative;
  display: noe;
  left: 0px;
  color: #cccccc;
 /*background-color: #2a2a2a;*/
  font-weight: 400;
  font-size: 16px;
  padding: 18px 0px 18px 37px;
  width: 100%;
}


li ul li a::before{
  content: '';
  border-top: 1px solid #666666;
  /*position: absolute;*/
  top: 1px;
  width: 100%;  
}


li ul li a:hover,
li ul li a:active,
li ul li a:focus{
  color: #cccccc;
}
<ul>
        <li><a href="#">ABOUT OWSD</a></li>
        <li><a href="#">WHY OWSD</a>
            <ul>
                <li><a href="#">Objectives</a></li>
                <li><a href="#">Women and Gender</a></li>
                <li><a href="#">Success stories</a></li>
                <li><a href="#">Gender insite</a></li>
                <li><a href="#">Partners</a></li>
            </ul>
        </li>
        <li><a href="#">NETWORK</a></li>
        <li><a href="#">CAREER DEVELOPMENT</a></li>
        <li><a href="#">RESOURCES</a></li>
        <li><a href="#">RESOURCES</a></li>
    </ul>

Thank you

Upvotes: 0

ferr
ferr

Reputation: 1217

Try adding this after your li ul li a:before

li ul li:first-child a:before{
  content: '';
  border-top: 0;
  position: absolute;
  top: 1px;
  width: 100%;  
}

Upvotes: 2

Related Questions