javascript到css选择器

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);