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

HTML-CSS
1

But it seems select both with

:nth-child(1);

https://jsfiddle.net/9g10uno5/2/

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

Thanks.

2

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
3

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

4

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
document.querySelector('input[type="checkbox"]').nextElementSibling

Or you can just give the checkbox a specific selector.

1 Like
5

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
6

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

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

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

https://jsfiddle.net/baogdm02/

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.