No, the style application and precedence works and that takes over which styles are applied. The class-based styles are applied to your class-based element and any div styles that are not being overridden by the class styles. On the div that does not contain a class, only div styles are applied.
Also, in CSS, styles are applied from top to bottom. So, that is also where the styles can be overridden if they are valid in the precedence.
Please see this:
Specificity - CSS: Cascading Style Sheets | MDN[
^] and
html - What is the order of precedence for CSS? - Stack Overflow[
^]
Try this example fiddle that I created and play with it to learn how the styles are applied:
Edit fiddle - JSFiddle - Code Playground[
^]. Code is also shared here for
other purposes.
<div class="styled">
Stylized with class content.
</div>
<div> <!--
Non-stylized content.
</div>
The CSS for this document is:
div {
background: #cecece;
font-weight: 600;
}
.styled {
background: #fff;
color: red;
}
You can see, how different properties are applied from parent type and how they are overridden by specialized class or ID (not shown here) specifiers.