document.querySelector whats " * " doing?

Question

I saw a sample which looked like this:

document.querySelector('#webchat > *').focus();

I know what it does (sets the focus into the sendbox of the webchat), but I dont understand what the " * " stands for. I know that #webchat is the "parent".

I implement the whole webchat with an external javascript, so I didn't code anything of the DOM. The sendbox's id is "webchat-sendbox-input" so nothing with a " * ".

Thats how the DOM looks like:

score 2 · Accepted Answer · answered Jan 14 '20 at 10:31

2

See the specification:

The universal selector, written as a CSS qualified name [CSS3NAMESPACE] with an asterisk (* U+002A) as the local name, represents the qualified name of any element type. It represents any single element in the document tree in any namespace (including those without a namespace) if no default namespace has been specified for selectors. If a default namespace has been specified, see Universal selector and Namespaces below.

or MDN:

The CSS universal selector (*) matches elements of any type.
/* Selects all elements */
* {
  color: green;
}

or even W3Schools (which manages to correctly cover the basics for documents without namespaces):

Select all elements, and set their background color to yellow:
* {
    background-color: yellow;
}

answered Jan 14 '20 at 10:31

Quentin

914,110
126
1,211
1,335

So basically it tries to focus on every element inside of #webchat? – BeschtPlaier Jan 14 '20 at 10:33
@BeschtPlaier — No. Since (a) `querySelector` only returns the first match and (b) It uses a child combinator and not a descendant combinator. – Quentin Jan 14 '20 at 10:34
I think i still don't understand it then. When " * " selects all elements and #webchat is the parent, it should select all elements of #webchat, shouldn't it? Or does it try to get as low as possible ? Or am I completly wrong? – BeschtPlaier Jan 14 '20 at 10:40
1

https://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors – Quentin Jan 14 '20 at 10:42
So " #webchat > * " just selects the first element right after #webchat, no matter which kind of element it is? – BeschtPlaier Jan 14 '20 at 10:44
No. It selects all the children. – Quentin Jan 14 '20 at 10:48
Oh okay. I think i got it now, thank you very much :) "only returns the first match" confused me. – BeschtPlaier Jan 14 '20 at 10:50
**`querySelector`** only returns the first match – Quentin Jan 14 '20 at 10:51

document.querySelector whats " * " doing?

1 Answers1