javascript to css selector

Question

I would like to convert this javascript line of code to CSS, I've been searching the site and google but haven't got straight answer.

var riskCell20 = document.getElementById("risk.probablity.literal.l100").childNodes[2];

to something like

#risk.probablity.literal.l100:nth-child(2);

could not find the right syntax

Answer 1

As the id has dots, which is the character for target a class, you could use the attribute selector.

[attribute="value"]

With it you can target an element's attribute, such as title, href, etc., and in this case its id.

Stack snippet sample

[id="risk.probablity.literal.l100"] :nth-child(2) {
  color: red;
}

<div id="risk.probablity.literal.l100">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

---

Note, the nth-child is not zero based, the childNodes is, so if you want the third child (childNodes[2]), your nth-child should be 3 (nth-child(3))

Answer 2

Since the . character has a special meaning on a selector, you may have to escape it:

#risk\.probablity\.literal\.l100:nth-child(2);