How to apply css style for a span containing an active link [duplicate]

Question

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

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. jsfiddle.net/cdku8agp — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Jan 9, 2015 at 7:32
Doggone it, I meant stackoverflow.com/questions/1014861/… is the dupe. Flag dialog, y u no work? — Nathan Tuggy
– Nathan Tuggy, Commented Jan 9, 2015 at 7:35

Vitorino fernandes · Accepted Answer · 2015-01-09 07:32:49Z

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>

answered Jan 9, 2015 at 7:32

Vitorino fernandes

16k3 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kapantzak · Accepted Answer · 2015-01-09 07:33:14Z

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;

answered Jan 9, 2015 at 7:33

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Comments

DMSJax · Accepted Answer · 2015-01-09 07:43:27Z

0

http://jsfiddle.net/ubyxcaor/

Use CSS selector [class=linkActive]

<style>
span a[class=linkActive] {border: solid thin green;}
</style>

answered Jan 9, 2015 at 7:43

DMSJax

1,7274 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to apply css style for a span containing an active link [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related