CODEWITHSUNDEEP
htmlcsscss-selectors
user1765862
user1765862

Reputation: 14145

targeting css class under element with id

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 {
}

Upvotes: 1

Views: 728

Answers (2)

phaberest
phaberest

Reputation: 3220

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.

Upvotes: 3

John Slegers
John Slegers

Reputation: 47091

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.

Upvotes: 0

Related Questions