Calling a CSS class inside another class?

Question

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

If it fits your use case, this is one of the things SASS is meant to address. — Andrew
– Andrew, Commented Feb 26, 2021 at 15:02

T.J. Crowder · Accepted Answer · 2011-06-13 06:19:53Z

23

You can't actually do a reference (one of CSS's major failings), but you can do this:

.btn:active, .red {
    /* Block A: Most (or all) of what used to just be in .red below */
}

.btn:active {
    /* Block B: Stuff *just* for .btn:active, if any */
}

.red {
    /* Block C: Stuff *just* for .red, if any */
}

The comma means that the definitions in the body of Block A apply separately to each of those selectors, and so they apply to any ".btn" elements that are ":active", and separately apply to any ".red" elements.

Block B and Block C are optional. They're for any definitions you only want to apply to the given selector. You usually list these after Block A because rules of equal specificity are applied top-to-bottom, so you can override anything from Block A that you want to in Block B or Block C, and those blocks will "win".

answered Jun 13, 2011 at 6:19

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Abhishek Over a year ago

Hmmm... I understand the concept, you're taking the common attributes to be shared by both, the .btn:active and the .red classes... But you see, the content is EXACTLY the same... Perhaps I just use your first declaration? That way I define the attributes only once, but they apply to the .btn:active and the .red classes at the same time?

T.J. Crowder Over a year ago

@Abhishek: Yes, that's it exactly; if everything should be exactly the same, you just define the first rule and not the other two. The other two are just if you need to then define some further properties that are specific to only ".btn:active" or ".red" but not the other. Everything they share goes in the first rule. If they share everything, then that's the only rule.

Daniela · Accepted Answer · 2021-02-26 14:26:10Z

-1

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>

edited Feb 26, 2021 at 14:26

answered Feb 26, 2021 at 14:10

Daniela

111 bronze badge

2 Comments

Andrew Over a year ago

The application of this to the OP's question isn't super direct.

Canned Man Over a year ago

Shouldn't it be .classB{} (with a full stop), or am I missing something?

Collectives™ on Stack Overflow

Calling a CSS class inside another class?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related