CODEWITHSUNDEEP
javascriptcss
blueseal
blueseal

Reputation: 355

How to modify a CSS value when it's nested?

I can change the top property of percent1 with

document.getElementById('percent1').style.top = '50px';

HTML:

<div class="box" id="box1">
  <div class="percent" id="percent1">
   <svg>
      <circle cx="70" cy="70" r="70"></circle>
      <circle cx="70" cy="70" r="70"></circle>
    </svg>
    <div class="num">
      <h2>45<span>%</span></h2>
    </div>
  </div>
  <h2 class="text">Percentage</h2>
</div>

CSS to modify:

.box .percent svg circle:nth-child(2)
{
  stroke-dashoffset:calc(440 - (440 * 15) / 100);
}

How can I change "stroke-dashoffset" value when it's nested like this?

Upvotes: 1

Views: 567

Answers (2)

Ross Moody
Ross Moody

Reputation: 943

It would appear :nth-child targeting matches elements based upon their position, not on their properties so I think what you want isn't possible with this approach.

Could consider attaching some other type of targeting mechanism (either in HTML or JS) to target the element you want to style more granularly in CSS.

#percent1 {
  position: absolute;
  top: 50px;
}

#percent1>svg {
  overflow: visible;
}

#percent1>svg>circle {
  fill: blue;
}

#percent1>svg>circle:nth-child(2) {
  fill: yellow;
}

#circle-target {
  stroke-dashoffset: 100;
  stroke: red;
  stroke-width: 8px;
}
<div class="box" id="box1">
  <div class="percent" id="percent1">
    <svg>
      <circle cx="70" cy="70" r="70"></circle>
      <circle cx="70" cy="70" r="70" id="circle-target"></circle>
    </svg>
  </div>

Upvotes: 1

KAYZORK
KAYZORK

Reputation: 393

You can do it with

document.querySelectorAll(".box .percent svg circle:nth-child(2)")

Upvotes: 0

Related Questions