Search code examples
cssreactjsstylesheetscss-lint

How to apply css to the property of the tag?

I am new to css and i would like to know if css can be applied to the properties of tag? For example in the below code i would like to see entry.count and "files" in blue color.

code 

  render() {

    return(
      <div className="AppL" id="AppList">

        {this.createApplicationList()}
      </div>); 
  }

  createApplicationList() {
    var guiResult = [];
    for (var key in this.state.AppName) {
      var entry = this.state.AppName[key];
      guiResult.push(
      <Collapsible trigger={entry.AppName + "\t" + "\t"  + entry.Count + " files"} className="AppList" transitionTime ="10"> 
      </Collapsible>);
    };  
    return guiResult;
  }

my scss for this component 

.AppList{
  color: black;
  border-bottom: 1px solid #00a886;
    padding-top:10px;
    padding-bottom:10px;
}

Collapsible tree structure

Solution 
  • .Collapsible .Collapsible__trigger {
  color: blue;
}

    .Collapsible selects all elements with the Collapsible class. Collapsible_trigger does the same for the Collapsible__trigger class. Together, the rule selects all .Collapsible__trigger elements within .Collapsible elements, and styles them with blue text.

    This is based purely on your provided HTML code. The JavaScript appears to be irrelevant.

    .Collapsible .Collapsible__trigger.is-closed also works and is more specific. Depends on your use-case.