css - Select element without a child

Question

I have a page that might one of the following:

<span id='size'>33</span>

Or

<span id='size'>
    <b>33</b>
    <strike>32</strike>
</span>

I would like to grab the value '33' on both cases, is there a CSS selector I can use? I tried to use the following, #size with no b sibling or b which is a #size sibling:

document.querySelector('#size:not(>b), #size>b').innerText

But I keep getting an error- "Error: SYNTAX_ERR: DOM Exception 12"

According to w3 Spec only Simple Selectors are supported, the thing is that "greater-than sign" (U+003E, >)" is considered as part of the Simple Selectors definition.

Answer 1

You can't do it with a regular CSS selector, but you can do it in a few lines of JS:

var element = document.querySelector('#size');
var b = element.querySelector('b');
var text = b ? b.innerText : element.childNodes[0].nodeValue;

console.log(text);