• 0

how to select a LI outside a class?


Question

I'm making tabs in CSS using UL, LI and classes. I'm having problems with a border-right in a LI next to the a class I'm selecting. It shows two border lines. I want to get rid of one but don't know how to do that. The active class will change and it will need to be apply to the LI next to it and don't know how to do so. Example below.

<ul>
    <li><a></a></li>
    <li><a></a></li> <--- Want to change this LI.
    <li class="active"><a>I'm active!</></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>


<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li> <--- Want to change this LI.
    <li class="active"><a>I'm active!</></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Edit.. misread..

Could you not use jQuery?  Find the li with the class then do a .prev() and apply styling to it?  Also.. could you not just change the active class to NOT add a second border?

Link to comment
Share on other sites

  • 0
 

 

I'm making tabs in CSS using UL, LI and classes. I'm having problems with a border-right in a LI next to the a class I'm selecting. It shows two border lines. I want to get rid of one but don't know how to do that. The active class will change and it will need to be apply to the LI next to it and don't know how to do so. Example below.

<ul>
<li><a></a></li>
<li><a></a></li> <--- Want to change this LI.
<li class="active"><a>I'm active!</></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>


<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li> <--- Want to change this LI.
<li class="active"><a>I'm active!</></li>
<li><a></a></li>
<li><a></a></li>
</ul>

 

 

You can use the + selector to select the next sibling (e.g. li.active + li {...}), but if you want to select a previous sibling you'll probably need to do it with some javascript.

 

More information here: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Link to comment
Share on other sites

  • 0

I think there will be a solution where you won't have to target the previous li, do you have a link we could look at to understand better what you're wanting?

 

In CSS you can't specifically target a previous element unfortunately. 

 

jQuery would do quite easy with something like $('.active').prev().css('xxx', 'xxx'); although I think there would be other solutions if I could understand your problem better.

 

 

-- Edit: sorry basically just realised I said what others have

Link to comment
Share on other sites

  • 0

Ain't possible without jquery.

 

Though you can also use the following css method:

.active {
    margin: 0 -1px;
    padding: 0 1px;
}
This will let the ".active" tab overlap the previous and next tab which probably makes it overlap the borders.
Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.