3

I currently have 2 links enclosed within 2 spans however when a link is clicked an dis active, the link has a class"linkActive". I need to apply a border for the span containing the active link how can one do this in css styles

     HTML
        <div>
           <span class="sec">
              <a>Link1</a>
           </span>
           <span class="sec">
             <a class="linkActive">Link2</a>
           </span>
        </div>

I would like to apply border to span containing the anchor tag with link active class

 i tried    span.sec a.linkActive{
                 border-bottom: 3px solid black;
             }

It does not seem to work. Any help will be appreciated

looneytunes
  • 741
  • 4
  • 16
  • 35
  • There is no parent selector in css. You can use jquery for that. Otherwise just apply the border to your anchor like you posted. Your code is working. http://jsfiddle.net/cdku8agp/ – Suresh Ponnukalai Jan 09 '15 at 07:32
  • Doggone it, I meant http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector is the dupe. Flag dialog, y u no work? – Nathan Tuggy Jan 09 '15 at 07:35

3 Answers3

1

you can add border to a itself using pseudo element

div span {
  display: inline-block;
}
div span a {
  display: block;
  padding: 10px 20px;
  position: relative;
}
div span a.linkActive:after {
  content: '';
  position: absolute;
  width: 100%;
  background: black;
  height: 3px;
  bottom: 0;
  left: 0;
}
<div>
  <span class="sec"><a>Link1</a></span>
  <span class="sec"><a class="linkActive">Link2</a></span>
</div>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
0

You can not affect a parent element only via CSS, you have to use js.

jQuery

$('span.sec > a').click(function() {
   $(this).closest('span').css({'border-bottom': '3px solid black'});
})s;
kapantzak
  • 11,610
  • 4
  • 39
  • 61
0

http://jsfiddle.net/ubyxcaor/

Use CSS selector [class=linkActive]

<style>
span a[class=linkActive] {border: solid thin green;}
</style>
DMSJax
  • 1,709
  • 4
  • 22
  • 35