CODEWITHSUNDEEP
htmlcss
user12434952
user12434952

Reputation:

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

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.

Tabs Picture for changing the icon color into white while highlighting

Upvotes: 0

Views: 89

Answers (3)

Abhishek Kumar
Abhishek Kumar

Reputation: 549

Add The Following

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

Upvotes: 2

Ryan Miller
Ryan Miller

Reputation: 1063

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.

Upvotes: 0

Vitaliy Javurek
Vitaliy Javurek

Reputation: 142

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

Upvotes: 0

Related Questions