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

Does that element has that ID of exactly that (with the periods)? Or are they classes? Your CSS string actually means selecting an element with ID risk with the classes probability, literal, l100 — Terry
– Terry, Commented May 7, 2018 at 16:34
Can we assume this element's childNodes consists of only element nodes? Because usually it contains text nodes alongside element nodes, and given the kind of document you're working with it's very likely this element contains text nodes which would completely throw off the index. — BoltClock
– BoltClock, Commented May 7, 2018 at 16:35
The is is the whole string, it is used just like java package naming — Randow
– Randow, Commented May 7, 2018 at 16:40

Asons · Accepted Answer · 2018-05-07 17:04:53Z

4

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

edited May 7, 2018 at 17:04

answered May 7, 2018 at 16:41

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haroldo_OK · Accepted Answer · 2018-05-07 16:46:12Z

1

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

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

answered May 7, 2018 at 16:46

Haroldo_OK

7,3033 gold badges50 silver badges86 bronze badges

Collectives™ on Stack Overflow

javascript to css selector

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related