targeting css class under element with id - html

Question

My html page structure is like this
<div id="myPage">
<div class="input-group bootstrap-touchspin">
<input id="784069" class="form-control my-class touchspin" type="text" value="0" name="784069" default-field="True" style="display: block;">
</div>
</div>
I tried to fetch this element with css like this
#myPage .input-group .bootstrap-touchspin {
}

Answer 1

It has to be #myPage .input-group.bootstrap-touchspin because the space indicates the next class is a child of the previous. No space means both classes belong to the same element.

Answer 2

Targeting the <input> element
If you want to target the actual <input> element, you should use this CSS :
#myPage .bootstrap-touchspin .touchspin {
/* properties go here */
}
The following alternatives also all target the <input> element :
#myPage .bootstrap-touchspin input.my-class {
/* properties go here */
}
#myPage .bootstrap-touchspin input {
/* properties go here */
}
#myPage input.touchspin {
/* properties go here */
}
#myPage .my-class {
/* properties go here */
}
#784069 {
/* properties go here */
}
...
Targeting the <div> element
If you want to target the <div> element surrounding the <input> element, you should use this CSS :
#myPage .bootstrap-touchspin {
/* properties go here */
}
The following alternative should also work :
#myPage .input-group {
/* properties go here */
}
Notes :
There are many ways to combine different selectors, that each have their own meaning. For an overview, take a look at the W3Schools CSS Selector Reference.
In the latter case (targeting the <div> element), you could use #myPage .input-group.bootstrap-touchspin { ... } (without the space). However, you don't really need the extra .input-group class because #myPage .bootstrap-touchspin { ... } is already pretty specific. See this article for an introduction to CSS specificity.