Put css class directly on element or its parent - html

Question

I have a div and I need to color one of its children div. I was thinking of setting a CSS class to the parent div instead of directly on the children div since I have a javascript class that already have a reference to the parent, so I don't need to lookup for the children.
Is it a bad pratice ? Could it cause me trouble in the future ?
Here an example http://codepen.io/anon/pen/pJgzJp?editors=110
html:
Is this better
<div class="parent1 whatIPrefer">
<div class="children1">
</div>
</div>
than
<div class="parent2">
<div class="children2 meh">
</div>
</div>
css
.parent1{
width:200px;
height:200px;
}
.children1{
width:200px;
height:200px;
}
.whatIPrefer .children1{
background-color: gold;
}
.parent2{
width:200px;
height:200px;
}
.children2{
width:200px;
height:200px;
}
.meh{
background-color: tomato;
}
More Context: I want to display problematic items in a red in my page. There could be many items colored that way, my javascript code to colour it look like this
for (var i = 0; i < this._report.WorksheetSectionIDs.length; i++) {
var worksheetSection = this._report.GetWorksheetSection(i);
if (worksheetSection._worksheet._grid.getColumns().length != columnsCount) {
this.Errors.push("Worksheet " + worksheetSection._sectionID + " doesn't have the right number of columns.");
worksheetSection.SetInErrorState();
}
}
where each worksheetSection has a reference to the parent element, so I can easily add a class to it.

Answer 1

Your situation is largely dependent on your use case. You did not provide much context, so this may be the best or not the best application for targeting your child div.
You can access the child of a div using the child selector for css:
.whatIPrefer > div { styles }
Here is an excellent article on selecting children of a parent element - check it out.
Hope this helps. Please comment below with any other questions. Thanks

Answer 2

It depends on web structure, and on elements, that you are styling. For example, if you know, that header will be just one, you can easilly style directly the header, but if there is more headers with different styles, for example header in body, header in head and so on. In that case it is good to style throw parent element.
In my projects, i always style throw parent elements, sometimes it is useless, but it is a good practise and you never know, when your web will need new elements.