I’m learning jQuery and i’m essentially wondering if it’s possible to use variables as selectors, like this:

let vbox = $("body").append("<div id='box'></div>");
vbox.css({
  'width': '200px',
  'height':'300px',
  'background-color':'hsl(0, 0%, 10%)',
  'border-radius':'10px',
  'position':'absolute',
  'color':'white',
'text-align':'center'
});

when I do this, the css code seems to apply to the whole document. I’m wondering if there’s anything wrong with this/if it just won’t work like that.

I figured out how to do it both of these ways:

var vbox = $("<div id='box'></div>")
  $("body").append(vbox)
  vbox.css({
    width:'200px',
    height:'300px',
    background:'hsl(0, 0%, 10%)',
    borderRadius:'10px',
    position:'absolute',
    color:'white',
    textAlign:'center'
  });

$("body").append("<div id='box'></div>");
  var bx = $('#box')
  bx.css({
    width:'200px',
    height:'300px',
    background:'hsl(0, 0%, 10%)',
    borderRadius:'10px',
    position:'absolute',
    color:'white',
    textAlign:'center'
  });

I’m just wondering what’s different about the first way and why it doesn’t work.