Как применить стиль css для диапазона, содержащего активную ссылку

Question

В настоящее время у меня есть 2 ссылки, заключенные в пределах 2 интервалов, однако, когда ссылка нажата, активна, ссылка имеет класс «linkActive». Мне нужно применять границу для диапазона, содержащего активную ссылку как можно сделать это в стилях CSS

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

Я хотел бы применить границу, чтобы охватить содержащий якорный тег с активным каналом класса

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

Это не работает. Любая помощь будет оценена

Answer 1

вы можете добавить границу к себе с помощью псевдо-элемент

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>

Answer 2

Вы не можете повлиять на родительский элемент только с помощью CSS, вы должны использовать JS.

JQuery

$('span.sec > a').click(function() { 
    $(this).closest('span').css({'border-bottom': '3px solid black'}); 
})s; 

Answer 3

http://jsfiddle.net/ubyxcaor/

селектор Используйте CSS [класс = linkActive]

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