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

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;}

CodePudding user response：

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.

CodePudding user response：

If you dint have the border property in the button, you could use the margin-bottom with padding-bottom to make an underline under Your button.

But in Your case i would:

Make a div and put that button to it.
and use :hover/:active margin-button on the div.

CodePudding user response：

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>

CodePudding user response：

<!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>