Replaced nested ternary

src/devtools/views/Components/Element.css

@@ -1,6 +1,6 @@
 .Element,
-.SelectedElement,
-.InactiveElement {
+.InactiveSelectedElement,
+.SelectedElement {
   border-radius: 0.25em;
   white-space: nowrap;
   line-height: var(--line-height-data);
@@ -14,7 +14,7 @@
 .Element:hover {
   background-color: var(--color-hover-background);
 }
-.InactiveElement {
+.InactiveSelectedElement {
   background-color: var(--color-inactive-background);
 }
 

src/devtools/views/Components/Element.js

@@ -116,15 +116,16 @@ export default function ElementView({ data, index, style }: Props) {
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
 
+  let className = styles.Element;
+  if (isSelected) {
+    className = treeFocused
+      ? styles.SelectedElement
+      : styles.InactiveSelectedElement;
+  }
+
   return (
     <div
-      className={
-        isSelected && treeFocused
-          ? styles.SelectedElement
-          : isSelected
-          ? styles.InactiveElement
-          : styles.Element
-      }
+      className={className}
       onMouseEnter={handleMouseEnter}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}