How do you limit the scope in HTML?

This answer to this question is probably extremely obvious and I’m just not seeing it, but how do you make sure certain style attributes only apply to one element when referencing the tag that they use.

I currently have a pure css Collapsible I snagged from DigitalOcean and I am using Ember Components.

The code uses a checkbox to activate the Collapsible – which means it hides the checkbox in the style tag referencing the input tag:

<style>
    input[type='checkbox'] {
      display: none;
    }
</style>

...

<input id="collapsible" class="toggle" type="checkbox">

However, in doing so, I end up with all the other checkboxes on the page becoming hidden as well.
(And this style tag lives inside the .hbs Component file for the dropdown, dunno if that changes anything)

How can I target just the Collapsible specifically for hiding the checkbox?
Also let me know if there is any other information that might be helpful 🙂

So far I’ve tried wrapping this attribute inside another attribute:

 .hide-checkbox {
    input[type='checkbox'] {
      display: none;
    }
  }

But that just gave me a text input box instead of a checkbox.

>Solution :

You can target elements in a variety of ways. In your case, if the element has an id, use that since id should be unique anyway:

#collapsible {
  display: none;
}

<input id="collapsible" class="toggle" type="checkbox">

So far I’ve tried wrapping this attribute inside another attribute

That would also work, if your element is wrapped in a matching element:

.hide-checkbox {
  input[type='checkbox'] {
    display: none;
  }
}

<div class="hide-checkbox">
  <input id="collapsible" class="toggle" type="checkbox">
</div>

Or, if you don’t want to introduce a wrapping element, use that class on the target element itself:

input.hide-checkbox[type='checkbox'] {
  display: none;
}

<input id="collapsible" class="toggle hide-checkbox" type="checkbox">