Precedence of "concatenated classes" vs "separated classes" in CSS selectors [duplicate] - css

Question

This question already has answers here:
Specificity of inherited CSS properties
(4 answers)
Closed 3 months ago.
Can someone please point me to the CSS precedence rules regarding "concatenated classes" vs "separated classes"?
Also, what are the correct terms for "concatenated classes" vs "separated classes" (I suspect that's why I can't find the documentation I'm looking for.)
For example, in the CSS below, .row .second (with a space) appears to take precedence over .row.second (no space), even though they both match 2 class attributes.
.row {
width: 150px;
background-color: lightgray;
margin: 15px;
}
section {
margin-left: 15px;
}
.row .second {
color: purple;
}
.row.second {
color: orange;
}
When applied to the HTML below, the CSS above produces this result:
Why is "Stuff 2b" in purple instead of orange? (In other words, why does .row .second take precedence over .row.second in this case?)
<div id='outerBox'>
<div class="row">
<div class="title">
Row 1 Title
</div>
<section>
Stuff 1a
</section>
<section class='second'>
Stuff 1b
</section>
<section>
Stuff 1c
</section>
</div>
<div class="row second">
<div class="title">
Row 2 Title
</div>
<section>
Stuff 2a
</section>
<section class='second'>
Stuff 2b
</section>
<section>
Stuff 2c
</section>
</div>
<div class="row">
<div class="title">
Row 3 Title
</div>
<section>
Stuff 3a
</section>
<section class='second'>
Stuff 3b
</section>
<section>
Stuff 3c
</section>
</div>
</div>
(I'm applying the CSS above to the HTML below in JSFiddle in Chrome on MacOS.)

Answer 1

separated classes is using for Childs in css.
Example :
.row .red # Means red Childs in Row
{
color:red;
}
<tr class="row">
<td class="red">
<p>Hey!</p> ### Color of this P will be red.
</td>
</tr>
The color of the classnamed as "red" elements in ".row" will be red.
But concatenated classes using for like "with".
Lem me show a example;
.row.red # Means class="row red"
{
color:red;
}
<tr class="row">
<td class="red">
<p>Hey!</p> # Color of this P will not be red.
</td>
</tr>
<tr class="row red">
<td class="">
<p>Hey!</p> # But this one will be red.
</td>
</tr>

Answer 2

While most commonly used, classes have nothing to do with Object Orientation. This means that there is no OO mechanism to 'concatenate/separate' anything. It's pure a syntax for creating different kinds of CSS selectors. I always consider CSS definitions as an eleborate list of if-statements.
without space, .row.second: all .row elements that are also .second
with space, .row .second: all .row elements that have .second child elements in their list of child elements. Any nesting deep.
This also means that there is no specific precedence at play in your case.
You either select any second row element or any second child element of any row element.
I get the feeling that your confusion originates from the difference in notation in CSS and HTML tags:
<tag class="row second"> with space is not equal to.row .second { ... } also with space, but equal .row.second { ... } without space.
It literally means a <tag> that is both a .row and a .second.
With space in CSS litterally means select all parent tags that are .row and select all .second child tags of those parents.
Update
I forgot to mention (like #TemaniAfif did) that color is inherited from the parent, I assumed it to be known by OP.
snippet showing the various possibilities:
div>* {
background-color: lightgray;
margin: 15px;
}
/* the default for all */
.row, .default1 { color: purple }
.second, .default2 { color: orange }
/* exceptions in special cases */
.row.second, .exception1 { color: green }
.row .second, .exception2 { color: red }
<p><b>Legend:</b> explanation per parent class used and (rule that applies)</p>
<h3>no parent class</h3>
<div>
<div>no class, will be document default</div>
<div class="row">row, will be purple (default1)</div>
<div class="second">second, will be orange (default2)</div>
<div class="row second">row second, will be green (exception1)</div>
</div>
<h3>.row parent</h3>
<div class="row">
<div>no class, will be purple from parent (default1)</div>
<div class="row">row, will be purple, like parent (default1)</div>
<div class="second">second, will be red, because child of row (exception2)</div>
<div class="row second">row second, will be red, overrides parent (exception2)</div>
</div>
<h3>.second parent</h3>
<div class="second">
<div>no class, will be orange from parent (default2)</div>
<div class="row">row, will be purple, overrides parent (default1)</div>
<div class="second">second, will be orange, like parent (default2)</div>
<div class="row second">row second, will be green, overrides parent (exception1)</div>
</div>
<h3>.row .second parent</h3>
<div class="row second">
<div>no class, will be green from parent (exception1)</div>
<div class="row">row, will be purple, overrides parent (default1)</div>
<div class="second">second, will be red, because child of row (exception2)</div>
<div class="row second">row second, will be red, overrides parent (exception2)</div>
</div>