Nested Classes Selectors

How to reference nested classes with css?

In CSS, classes are prefixed by a ., ids are prefixed by #, and elements are not prefixed at all.

This is how you need to declare your CSS:

.box1 .box-body i {
   width: 30px;
}

Note that box1 and box-body are both classes, while i is an element.

Example:

<div class="class"></div>
<div id="id"></div>
<div></div>

I have listed three different <div> elements. This is how they would be accessed in CSS:

// first div
.class {
[some styling]
}

// second div
#id {
[some styling]
}

// third div
div {
[some styling]
}

How to create a nested class selector?

Put space between your selectors

.div14.welcome ...... means select all elements having both div14 and welcome class

.div14 .welcome ...... means select all elements having .welcome class inside .div14 class

Stack Snippet

.div14 .welcome {  color: red;}

<div class="div14">  <custom-element class="custom-class">    <span class="welcome">welcome text</span> .....  </custom-element></div>

CSS selector for nested class in SVG

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>

How to use ::v-deep selector for nested classes in vue

Wrap both nested selectors in :deep():


<style scoped lang="scss">
.v-select {
  color: green;
     br>  &:deep(.vs__dropdown-toggle) {
    background: #fff;
    border-color: #ddd;
    color: red;
  }
     br>  &:deep(.vs--open) {
    .vs__dropdown-toggle {
      border-color: #ff6000;
      color: blue;
    }
  }
}
</style>

demo

Nested class in another selected class with makeStyles

You can use https://www.npmjs.com/package/classnames to achieve this.

const useStyles = makeStyles(theme => ({
   root:{
      '&.selected $element': {
      }
   }
})

And your JSX

import classNames from 'classnames';

...

<div className={classNames(classes.root, elementSelected ? 'selected : '')}>
  <div className={classes.element}>
  </div>
</div>

CSS nested class can't be selected directly?

Yes. You can access the class directly and there is nothing wrong with your code.

You are seeing CSS Specificity in action here

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

The three css classes you used:

.offer-img: an element with the class .offer-img (less specific)
.col-2 img: img element inside an element with class-name .col2 (more specific)
.col-2 .offer-img: an element with class-name .offer-img inside an element with class-name .col2 (most specific)

The most specific style for the element will be applied if there are conflicts.