Calling a CSS class inside another class?

user_662108 0
Viewed 59887

Is it possible to have one CSS class reference another? Instead of rewriting all the css code again?

For example, I have this:

.btn{
    /* Whatever btn related styles I have */
}

.btn:hover{
    box-shadow:0 0 4px black;
}

.btn:active{
    /* This is where I want to reference the '.red' class */
}

.red{
    /* There is a LOT of CSS code here for cross browser gradients */
}

The thing is, I'm already using the .red class as is in certain places, and I'd also like to apply the same gradient style to the 'active' state of all elements with the .btn class...

If you can help solve (it need not be the way I've requested it) this, I'd greatly appreciate it...

class css
2 Answers

For call class to another class.

.classA{
 
 }
 .classB .classA:hover{
   visibility: visible;
   /*classA -> onmouseover , classB -> visible*/
 }

 classB{
 visibility: hidden;
 }

Sample code show popUp onmouseover

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /* Popup container - can be anything you want */
    .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .popup:hover .popuptext{
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
    /*onmouseover .popup class .popuptext is visible*/
    }
    
    /* The actual popup */
    .popup .popuptext {
      visibility: hidden;
      width: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -80px;
    }
    
    /* Popup arrow */
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    
    
    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
      from {opacity: 0;} 
      to {opacity: 1;}
    }
    
    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
    }
    </style>
    </head>
    <body style="text-align:center">
    
    <h2>Popup</h2>
    
    <div class="popup">over me to toggle the popup!
      <span class="popuptext" id="myPopup">A Simple Popup!         </span>
    </div>
    
    
    
    </body>
    </html>

user_137271390
Related