Want to add an CSS class into another CSS class with different property

Question

I am using two CSS classes for highlighting the icon color as white and changing the 'h6' tag background-color as #325868.

The icon color is by default black in color. Now, I have actually used a '.highlighted_fileName' class for highlighting the 'h6' element and my icon is placed in a 'span' tag just beside the 'h6' tag. Below is my code that I have tried, please refer to the same.

.highlighted_fileName{
    color:white !important;
    background-color: #325868 !important;

    .closeTab{
        color:#ffffff;
     }
}

<h6 class="float-left fileName card elementSelectedId truncate" data-toggle="tooltip" title=` +noOfEditors[0].pathTitle+ ` id="featureFileName_1"
                                style="border-color: cadetblue;  left: 0.5vw; top: 2vh; font-weight: bolder; border-width: thin;" 
                                 onclick="openEditorTab(this,noOfEditors[0].pathTitle,noOfEditors[0].fileName);">&nbsp;`+ noOfEditors[0].fileName +`</h6><span><i id = "icon_1" class="fa fa-times closeTab" style="position: relative; top: 26px; right: 10px;display:block;" onclick="closeTab(this,noOfEditors[0].pathTitle,noOfEditors[0].fileName,document.getElementById('featureFileName_1'));" aria-hidden="true"></i></span>

I know this is not true as I have tried it and it didn't give me the result as my expectation. So can anyone please tell me how can I achieve this. Also, please refer to the below picture for more information.

Can you plug in the whole code that you are using for the elements to your post? — Sleek Geek
– Sleek Geek, Commented Feb 4, 2020 at 7:52
If it's beside you would need the + css selector. But please post the relevant HTML so we know what you are talking about. — cloned
– cloned, Commented Feb 4, 2020 at 7:55
Can you please paste html code also. Are you trying to change the color of close icons to white ? — Sohail Mushtaq Awan
– Sohail Mushtaq Awan, Commented Feb 4, 2020 at 8:00
@SohailMushtaqAwan Yes, I want to change the close icon in a white color — user12434952
– user12434952, Commented Feb 4, 2020 at 8:09

Zunaib Imtiaz · Accepted Answer · 2020-02-08 20:03:47Z

2

Add The Following

.highlighted_fileName + span i{
Color:#fff:
}

edited Feb 8, 2020 at 20:03

Zunaib Imtiaz

3,2191 gold badge13 silver badges22 bronze badges

answered Feb 8, 2020 at 18:16

Abhishek Kumar

5499 silver badges18 bronze badges

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

Comments

Vitaliy Javurek · Accepted Answer · 2020-02-04 07:58:59Z

0

Please, do not use !important. Also for css kebab-case is better. Check this, just rename it as you want, and put needed colors.

.label {
   color: #000;
   background-color: #fff;

  .close-icon {
     color:#000;
    }
 }
 .label.active {
     color: #fff;
     background-color: #000;

     .close-icon {
       color:#fff;
      }
 }

answered Feb 4, 2020 at 7:58

Vitaliy Javurek

1526 bronze badges

Comments

Ryan Miller · Accepted Answer · 2020-02-08 18:46:55Z

Unless you are using a CSS preprocessor like SASS or LESS, nesting rulesets is not permitted. Thus, your closeTab ruleset is likely being ignored.

To address this, simply break out your closeTab class from within the highlighted_fileName class as follows:

.highlighted_fileName {
    color:white !important;
    background-color: #325868 !important;
}

.highlighted_fileName .closeTab {
    color:#ffffff;
}

Depending on the specificity of the rulesets provided by Font Awesome, this may still not work. At minimum, you'll be providing the browser with CSS it can understand. Hope this helps!

P.S. As Vitaliy mentioned, using !important should be avoided unless absolutely necessary. I don't fully understand your use case, but I think you should be able to get away without it.

Collectives™ on Stack Overflow

Want to add an CSS class into another CSS class with different property

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related