CSS, HTML - Color change of HR element by button:active

user_17408383 0
Viewed 73

I have 4 buttons with a horizontal line underneath for which i used a HR element. When i click the buttons they turn red. Is it possible that i make the line underneath turn red as well when i click any of the buttons?

button.nav-buttons {
  width: 130px;
  border: 0.5px solid;
  background-color: transparent;
  border-color: transparent;
  border-radius: 3px;
  font-family: "Lucida Console", "Courier New", monospace;
  color: white;
  font-weight: 600;
  font-size: 20px;
}

button.nav-buttons:hover {
  border-color: white;
}

button.nav-buttons:active {
  color: red;
  border: 1px solid red;
}

#hr-nav {
  width: 80%;
  margin: auto;
  border: 1px solid white;
}
css html
3 Answers

Use the general sibling combinator ~:

button.nav-buttons:active~#hr-nav { border-color: red; }

For that to work, the button elements and the hr element need to have the same parent element.

If that is not the case, please add the relevant HTML structure to your question.

user_37443040

Use adjacent sibling selector (+). with the "+" selector you can select an element that is directly after another element. button.nav-buttons:active + hr { border-color: red;}

button.nav-buttons {
width: 130px;
border: 0.5px solid;
xxx_background-color: transparent;
border-color: transparent;
border-radius: 3px;
font-family: "Lucida Console", "Courier New", monospace;
color: white;
font-weight: 600;
font-size: 20px;}


button.nav-buttons:hover {
border-color: white;}

button.nav-buttons:active {
color: red;
border: 1px solid red;}

button.nav-buttons:active + hr { border-color: red;}

#hr-nav {
width: 80%;
margin: auto;
border: 1px solid white;}
<div class="wrapper">
<div class="parent">
  <button class="nav-buttons">x</button>
  <hr/>  
</div>
<div class="parent">
  <button class="nav-buttons">x</button>
  <hr/>  
</div>
  
</div>

user_148071110 
<!DOCTYPE html>
<html>
<head>
<style>
#nav-bar-outer { width: 100%; }

#nav-bar { margin: auto; width: 55%;}

a.nav-buttons {
width: 500px;
border: 1px solid;
margin: 2px 20px;
padding: 0px 25px;
background-color: transparent;
border-color: transparent;
border-radius: 3px;
font-family: "Lucida Console", "Courier New", monospace;
color: black;
font-weight: 600;
font-size: 20px;
text-decoration: none; }

a.nav-buttons:hover { border-color: white; }

a.nav-buttons:active { border-color: red; color: red; }

a.nav-buttons:active~#hr-nav { border-color: red; }
</style>
</head>
    
<body>
    <div id="nav-bar-outer"><div id="nav-bar"><center>
        <a class="nav-buttons" href="">1</a>
        <a class="nav-buttons" href="">2</a>
        <a class="nav-buttons" href="">3</a>
        <a class="nav-buttons" href="">4</a>
        <hr id="hr-nav"></center>
</body>
</html>
user_174083830
Related