HTML: Should I place my styles on inner elements or surrounding div elements?

Question

In HTML Code or some template code, where should I place my styles in general? On the inner specific elements or the surrounding div elements? And / or does it make any difference at all (e.g does it work always on the div or just on some specific elements?)?

Here is an example, the style class "cPointer" for cursor:pointer works on the div as well as on the icon...

but what is considered a better approach or is there a general rule?

<div id="apps-trash-<%- el.id %>" data-index="<%- el.id %>" class="${data.editMode ? 'showMode' : 'hideMode'} s-apps-trash" >
   <i class="t--Cancel cPointer"></i>
</div>

Answer 1

It shouldn't effect the entire DIV. I think what's happening in your scenario is your i's innerHTML is the only content inside of the DIV which takes up all of its space. Though, I can't guarantee anything without the rest of the CSS.

Example with only i content:

.cPointer{
  cursor: pointer;
}

<div id="apps-trash-<%- el.id %>" data-index="<%- el.id %>" class="${data.editMode ? 'showMode' : 'hideMode'} s-apps-trash" >
   <i class="t--Cancel cPointer">Pointer</i>
</div>

Example with other content inside of DIV:

.cPointer{
  cursor: pointer;
}

<div id="apps-trash-<%- el.id %>" data-index="<%- el.id %>" class="${data.editMode ? 'showMode' : 'hideMode'} s-apps-trash" >
Other Text
   <i class="t--Cancel cPointer">Pointer</i>
</div>