I have two checkbox I want select only first one with nth-child

But it seems select both with



Why select both not just first one with 1? Logic?


Looking at your markup they are both the first element according to each respective parent, since they are individually wrapped into a span

Or in other words the two inputs are not siblings.
Hope this helps :+1:

1 Like

And really is because span tag… Hm is fine but then i not have idea how to pass with span inside it maybe? Hm…

You can update its style using Javascript, if that’s an option for you and you don’t want to change the html.

// select the label with JS

Or you can just give the checkbox a specific selector.

1 Like

Adding JS seems a bit excessive instead of just making the CSS more specific:

span:nth-child(1) > input[type="checkbox"] + label {
  background: red;
1 Like

The label also has a unique for attribute you can use it if you want.

label[for="input_deltaone_call"] {
  background: red;
1 Like

By the way I changed my span inside label at text like this:


And it also solved the problem and better for tooltip now as it display only on text and center it on text not whole part of input with label.