CSS selector for nested class in SVG-CodePudding

My, admittedly fuzzy, understanding has been that .classA .classB indicates a selector that will target elements with classB that are nested inside another element with classA. However, this is not borne out by what I see in the example shown below.

#welcomeFooter
{
 position:fixed;
 display:flex;
 justify-content:space-around;
 width:100%;
 left:0;
 right:0;
 bottom:0;
 z-index:1000;
 height:4em;
 background-color:orange;
}

.thumb
{
 position:relative;
 width:2em;
}


.thumb > svg
{
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 pointer-events:all;
 cursor:pointer;
}

.thBack
{
 visibility:hidden;
}

.raised 
{
 top:-30% !important;
 bottom:30% !important;
}

.raised .thBack
{
 visibility:visible !important;
}

.thIcon{fill:white;}

.raised .thIcon{fill:black;}

<footer id='welcomeFooter'>
    <div class='thumb'>
     <svg id="search" class="raised" viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><g class = "thBack"><ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/><path d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z" style="fill:#ff971b"/><rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b"/></g><ellipse class = "thBack"" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/><path d="m397.045 325.403-64.573-64.578a112.914 112.914 0 0 0 17.339-60.268c0-62.681-50.814-113.489-113.494-113.489s-113.489 50.808-113.489 113.489c0 62.685 50.807 113.487 113.489 113.487 23.18.03 45.817-7.076 64.822-20.347l63.805 63.81a22.648 22.648 0 0 0 16.051 6.635 22.663 22.663 0 0 0 16.057-6.635c8.802-8.808 8.798-23.298-.007-32.104Zm-160.728-48.127c-42.366 0-76.714-34.346-76.714-76.714 0-42.367 34.348-76.716 76.714-76.716 42.368 0 76.713 34.349 76.713 76.716 0 42.368-34.345 76.714-76.713 76.714Z" style="fill-rule:nonzero" class="thIcon"/></svg>
    </div>
     <div class='thumb'>     
      <svg id='home' viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/><path d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z" style="fill:#ff971b"/><rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b"/><ellipse cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/><g><path d="M383.118 276.368a6.084 6.084 0 0 0-4.278-1.777 6.085 6.085 0 0 0-4.278 1.777 6.105 6.105 0 0 0-1.773 4.287c0 1.595.647 3.16 1.773 4.287a6.09 6.09 0 0 0 4.278 1.778 6.085 6.085 0 0 0 4.278-1.778 6.109 6.109 0 0 0 1.774-4.287 6.112 6.112 0 0 0-1.774-4.287Z" style="fill-rule:nonzero"/><path d="M411.52 358.278h-26.628V301.88c0-3.348-2.71-6.064-6.052-6.064-3.341 0-6.051 2.716-6.051 6.064v56.398H181.554v-57.004c0-3.349-2.71-6.064-6.052-6.064-3.342 0-6.052 2.715-6.052 6.064v57.004h-16.945V198.789l110.142-86.165 110.142 86.165v57.609c0 3.349 2.71 6.065 6.051 6.065 3.342 0 6.052-2.716 6.052-6.065v-48.14l1.058.827a6.042 6.042 0 0 0 8.003-.491l21.828-21.874a6.076 6.076 0 0 0-.556-9.069l-36.385-28.464V88.418c0-3.349-2.71-6.064-6.051-6.064h-35.075c-3.342 0-6.052 2.715-6.052 6.064v23.86L266.371 61.2a6.06 6.06 0 0 0-7.448 0L110.068 177.651a6.074 6.074 0 0 0-.555 9.069l21.828 21.874a6.065 6.065 0 0 0 8.003.491l1.058-.827v150.02h-26.628c-3.341 0-6.051 2.716-6.051 6.064 0 3.349 2.71 6.065 6.051 6.065H411.52c3.341 0 6.051-2.716 6.051-6.065 0-3.348-2.71-6.064-6.051-6.064ZM343.766 94.482h22.971v45.236l-22.971-17.971V94.482ZM136.115 196.225l-13.205-13.233L262.647 73.673l139.737 109.319-13.205 13.233-122.808-96.075a6.039 6.039 0 0 0-7.448 0l-122.808 96.075Z" style="fill-rule:nonzero"/><path d="M320.744 192.117H204.55c-3.341 0-6.051 2.715-6.051 6.064v116.434c0 3.349 2.71 6.065 6.051 6.065h116.194c3.341 0 6.051-2.716 6.051-6.065V198.181c0-3.349-2.71-6.064-6.051-6.064Zm-64.149 116.434h-45.993v-46.088h45.993v46.088Zm0-58.217h-45.993v-46.088h45.993v46.088Zm58.097 58.217h-45.993v-46.088h45.993v46.088Zm0-58.217h-45.993v-46.088h45.993v46.088Zm-139.19 20.925c-3.342 0-6.052 2.715-6.052 6.065v.097c0 3.349 2.71 6.065 6.052 6.065 3.342 0 6.052-2.716 6.052-6.065v-.097c0-3.349-2.71-6.065-6.052-6.065Z" style="fill-rule:nonzero"/></g></svg>
    </div>

    <div class='thumb'>
      <svg id='map' viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/><path d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z" style="fill:#ff971b"/><rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b"/><ellipse cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/><g><path d="M187.122 221.773H173.88c-3.465.001-6.612 2.173-7.984 5.51l-36.656 89.512 87.055-46.629c-10.421-15.122-20.733-31.801-29.173-48.393Zm168.421 5.51c-1.37-3.337-4.517-5.509-7.982-5.51H334.32c-15.941 31.327-39.164 63.7-53.937 81.51-10.39 12.498-28.948 12.483-39.322 0-1.061-1.277-6.6-8.004-14.231-18.347l-15.694 8.411 59.369 62.14 112.492-61.16-27.454-67.044ZM118.53 342.954l-4.734 11.564c-2.452 5.985 1.746 12.668 7.981 12.668h127.479c.798-.621.807-.584 5.087-2.911l-59.456-62.222-76.357 40.901Zm289.117 11.565-17.788-43.437-103.194 56.104h113c6.22 0 10.437-6.672 7.982-12.667ZM269.405 139.375c0-5.013-3.897-9.088-8.684-9.088-4.79 0-8.685 4.075-8.685 9.088 0 5.011 3.895 9.089 8.685 9.089 4.786 0 8.684-4.078 8.684-9.089Z" style="fill-rule:nonzero"/><path d="M267.274 290.75c2.924-3.52 71.603-86.835 71.603-144.105 0-118.096-156.312-119.537-156.312 0 0 57.27 68.679 140.585 71.603 144.105 3.462 4.166 9.65 4.161 13.106 0Zm-32.606-151.375c0-15.035 11.687-27.265 26.053-27.265 14.363 0 26.051 12.23 26.051 27.265 0 15.033-11.688 27.263-26.051 27.263-14.366 0-26.053-12.23-26.053-27.263Z" style="fill-rule:nonzero"/></g></svg>
    </div>
  </footer>

The desired outcome here is

The normal icon is shown in white without the white & orange background layers.
The raised icon is shown in black with the white & orange background layers

I had expected by .raised .thBack and .raised .thIcon selectors to do the trick here. Clearly they are not. What am I doing wrong?

CodePudding user response：

You haven't added thBack and thIcon classes to remaining two SVGs:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    #welcomeFooter {
      position: fixed;
      display: flex;
      justify-content: space-around;
      width: 100%;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      height: 4em;
      background-color: orange;
    }

    .thumb {
      position: relative;
      width: 2em;
    }


    .thumb>svg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      pointer-events: all;
      cursor: pointer;
    }

    .thBack {
      visibility: hidden;
    }

    .raised {
      top: -30% !important;
      bottom: 30% !important;
    }

    .raised .thBack {
      visibility: visible !important;
    }

    .thIcon {
      fill: white;
    }

    .raised .thIcon {
      fill: black;
    }

  </style>
</head>

<body>
  <footer id='welcomeFooter'>
    <div class='thumb'>
      <svg id="search" class="raised" viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
        style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
        <g class="thBack">
          <ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" />
          <path
            d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z"
            style="fill:#ff971b" />
          <rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b" />
        </g>
        <ellipse class="thBack"" cx=" 258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" />
        <path
          d="m397.045 325.403-64.573-64.578a112.914 112.914 0 0 0 17.339-60.268c0-62.681-50.814-113.489-113.494-113.489s-113.489 50.808-113.489 113.489c0 62.685 50.807 113.487 113.489 113.487 23.18.03 45.817-7.076 64.822-20.347l63.805 63.81a22.648 22.648 0 0 0 16.051 6.635 22.663 22.663 0 0 0 16.057-6.635c8.802-8.808 8.798-23.298-.007-32.104Zm-160.728-48.127c-42.366 0-76.714-34.346-76.714-76.714 0-42.367 34.348-76.716 76.714-76.716 42.368 0 76.713 34.349 76.713 76.716 0 42.368-34.345 76.714-76.713 76.714Z"
          style="fill-rule:nonzero" class="thIcon" />
      </svg>
    </div>
    <div class='thumb'>
      <svg id='home' viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
        style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
        <ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" />
        <path
          d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z"
          style="fill:#ff971b" />
        <rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b" />
        <ellipse class="thBack" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" />
        <g class="thIcon">
          <path
            d="M383.118 276.368a6.084 6.084 0 0 0-4.278-1.777 6.085 6.085 0 0 0-4.278 1.777 6.105 6.105 0 0 0-1.773 4.287c0 1.595.647 3.16 1.773 4.287a6.09 6.09 0 0 0 4.278 1.778 6.085 6.085 0 0 0 4.278-1.778 6.109 6.109 0 0 0 1.774-4.287 6.112 6.112 0 0 0-1.774-4.287Z"
            style="fill-rule:nonzero" />
          <path
            d="M411.52 358.278h-26.628V301.88c0-3.348-2.71-6.064-6.052-6.064-3.341 0-6.051 2.716-6.051 6.064v56.398H181.554v-57.004c0-3.349-2.71-6.064-6.052-6.064-3.342 0-6.052 2.715-6.052 6.064v57.004h-16.945V198.789l110.142-86.165 110.142 86.165v57.609c0 3.349 2.71 6.065 6.051 6.065 3.342 0 6.052-2.716 6.052-6.065v-48.14l1.058.827a6.042 6.042 0 0 0 8.003-.491l21.828-21.874a6.076 6.076 0 0 0-.556-9.069l-36.385-28.464V88.418c0-3.349-2.71-6.064-6.051-6.064h-35.075c-3.342 0-6.052 2.715-6.052 6.064v23.86L266.371 61.2a6.06 6.06 0 0 0-7.448 0L110.068 177.651a6.074 6.074 0 0 0-.555 9.069l21.828 21.874a6.065 6.065 0 0 0 8.003.491l1.058-.827v150.02h-26.628c-3.341 0-6.051 2.716-6.051 6.064 0 3.349 2.71 6.065 6.051 6.065H411.52c3.341 0 6.051-2.716 6.051-6.065 0-3.348-2.71-6.064-6.051-6.064ZM343.766 94.482h22.971v45.236l-22.971-17.971V94.482ZM136.115 196.225l-13.205-13.233L262.647 73.673l139.737 109.319-13.205 13.233-122.808-96.075a6.039 6.039 0 0 0-7.448 0l-122.808 96.075Z"
            style="fill-rule:nonzero" />
          <path
            d="M320.744 192.117H204.55c-3.341 0-6.051 2.715-6.051 6.064v116.434c0 3.349 2.71 6.065 6.051 6.065h116.194c3.341 0 6.051-2.716 6.051-6.065V198.181c0-3.349-2.71-6.064-6.051-6.064Zm-64.149 116.434h-45.993v-46.088h45.993v46.088Zm0-58.217h-45.993v-46.088h45.993v46.088Zm58.097 58.217h-45.993v-46.088h45.993v46.088Zm0-58.217h-45.993v-46.088h45.993v46.088Zm-139.19 20.925c-3.342 0-6.052 2.715-6.052 6.065v.097c0 3.349 2.71 6.065 6.052 6.065 3.342 0 6.052-2.716 6.052-6.065v-.097c0-3.349-2.71-6.065-6.052-6.065Z"
            style="fill-rule:nonzero" />
        </g>
      </svg>
    </div>

    <div class='thumb'>
      <svg id='map' viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
        style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
        <ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" />
        <path
          d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z"
          style="fill:#ff971b" />
        <rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b" />
        <ellipse class="thBack" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" />
        <g class="thIcon">
          <path
            d="M187.122 221.773H173.88c-3.465.001-6.612 2.173-7.984 5.51l-36.656 89.512 87.055-46.629c-10.421-15.122-20.733-31.801-29.173-48.393Zm168.421 5.51c-1.37-3.337-4.517-5.509-7.982-5.51H334.32c-15.941 31.327-39.164 63.7-53.937 81.51-10.39 12.498-28.948 12.483-39.322 0-1.061-1.277-6.6-8.004-14.231-18.347l-15.694 8.411 59.369 62.14 112.492-61.16-27.454-67.044ZM118.53 342.954l-4.734 11.564c-2.452 5.985 1.746 12.668 7.981 12.668h127.479c.798-.621.807-.584 5.087-2.911l-59.456-62.222-76.357 40.901Zm289.117 11.565-17.788-43.437-103.194 56.104h113c6.22 0 10.437-6.672 7.982-12.667ZM269.405 139.375c0-5.013-3.897-9.088-8.684-9.088-4.79 0-8.685 4.075-8.685 9.088 0 5.011 3.895 9.089 8.685 9.089 4.786 0 8.684-4.078 8.684-9.089Z"
            style="fill-rule:nonzero" />
          <path
            d="M267.274 290.75c2.924-3.52 71.603-86.835 71.603-144.105 0-118.096-156.312-119.537-156.312 0 0 57.27 68.679 140.585 71.603 144.105 3.462 4.166 9.65 4.161 13.106 0Zm-32.606-151.375c0-15.035 11.687-27.265 26.053-27.265 14.363 0 26.051 12.23 26.051 27.265 0 15.033-11.688 27.263-26.051 27.263-14.366 0-26.053-12.23-26.053-27.263Z"
            style="fill-rule:nonzero" />
        </g>
      </svg>
    </div>
  </footer>

</body>

</html>